Question

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

我想要实现的目标的形象：

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

Answer 1

您可以将max-width从固定值转换为相当高的数字，例如1000或3000像素，但会在mouseleave之后产生延迟：

<强> 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来完成。你可以测试它here。这是由于这个问题，这不仅与Firefox有关：Bug 571344 - Support transitions to and from 'auto' values of left, top, width, height, etc.。

您可以构建一个小的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库。但也可以很容易地使用Vanilla 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'));
    }
);

<强>演示

Try before buy

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

2 个答案: