将 li 转换为包含文本的宽度

Question

我想知道是否有人有任何例子来实现我正在寻找的东西。我希望选项卡在未被选中时具有固定宽度 - 但是，在悬停/焦点/选择时，它们将是包含文本的宽度。

我想要实现的目标的图像：

https://lh4.googleusercontent.com/-QrJnScR01yo/UjLE44u2qdI/AAAAAAAAFv0/qWaOY-hihk8/w887-h286-no/mockup.png

Answer 1

您可以将max-width从固定值转换为合理的高数字，例如 1000 或 3000 像素，但它会在鼠标离开后产生延迟：

http://codepen.io/anon/pen/tgJhz

.HTML

<ul>
    <li>Lorem ipsum.</li>
    <li>Lorem ipsum dolor.</li>
    <li>Lorem.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit.</li>
</ul>

.CSS

/* Non-relevant CSS */
ul
{
  margin: 0;
  padding: 0;
}
li
{
  float: left;
  list-style-type: none;
  border: 1px solid #000;
  white-space: nowrap;
  /* text-overflow: ellipsis; */
  overflow: hidden;
  cursor: pointer;
}
li+li { border-left: none; }
/* Relevant CSS */
li
{
  -webkit-transition: max-width 1s;
  max-width: 50px;
}
li:hover
{
  max-width: 1000px;
}

Answer 2

不幸的是，你想要实现的，动画到width: auto;，不能只使用CSS来完成。您可以在此处进行测试。这是由于这个问题，不仅与Firefox有关：错误571344 - 支持在左侧，顶部，宽度，高度等"自动"值之间转换。

你可以构建一些JavaScript解决方法，这将在这里帮助你：

.HTML

<ul>
    <li>Content 1 with more text</li>
    <li>Content 2</li>
</ul>

.CSS

ul > li {
    float: left;
    width: 50px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-transition: width 0.55s ease-in-out;
    -moz-transition: width 0.55s ease-in-out;
    -ms-transition: width 0.55s ease-in-out;
    -o-transition: width 0.55s ease-in-out;
    transition: width 0.55s ease-in-out;
}

JavaScript

在这个例子中，我使用 jQuery 库。但它也可以非常轻松地使用香草JS完成。

var elements = $('ul li');
elements.each(function(key, value) {
    var e = $(this)
    e.data('width-real', e[0].scrollWidth);
    e.data('width-collapsed', e.width());
});
elements.hover(
    function() {
        var e = $(this)
        e.css('width', e.data('width-real'));
    },
    function() {
        var e = $(this)
        e.css('width', e.data('width-collapsed'));
    }
);

演示

先试后买