1

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

我想要实现的图像：

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

4

2 回答 2

1

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

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;
}
于 2013-09-13T08:45:28.897 回答
0

不幸的是，您想要实现的动画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库。但它也可以很容易地用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'));
    }
);

演示

先试后买

于 2013-09-13T08:26:18.230 回答