javascript - CSS\JS - Long li 文本默认展开(应该 overflow hidden )

Question

我有几个包含一些文本的 li。宽度有限，因此用户可以看到前 30 个字符。我试图实现两件事，在前 30 个字符后添加 ... (显然 ... 应该在扩展模式下消失)，第二件事是扩展 li 以显示整个文本的能力。现在，文本默认展开，无法理解为什么。

fiddle在这里。

HTML:

<div>
  <ul>
    <li id="a">normal length text</li>
    <li id="b">this is a relatively long text</li>
    <li id="c">this is an example of a really long text</li>
    <li id="d">this is an example of an extremely long, pointless text. this is an example of an extremely long, pointless text</li>
  </ul>
</div>

CSS:

div {
  width: 250px;
}

div ul {
  text-align: left;
  padding: 0 10px;
}

ul li {
  list-style-position: inside;
  overflow: hidden;
  //text-overflow: elipsis;
}

JS:

$("li").on("click", function() {
  var titleLength = $(this).context.innerHTML.length;
  if (titleLength > 30) {
    if ($(this).height() == 18) {
    $(this).css('height', 'auto');
    var height = $(this).height();
      $(this).height(18).animate({height: height}, 200)
    } else {
      $(this).animate({
        height: 18
      }, 200)
    }
  }
});

Answer 1

默认情况下，您没有为 li 元素提供任何受限的 height，这意味着它们默认为 auto，因此包含整个字符串。

由于您的 jQuery 代码在关闭时将它们的高度设置为 18px，因此只需添加以下内容:

ul li {
  height: 18px;
  ...
}

Modified JSFiddle .

---

最重要的是:

1. 您在 text-overflow 属性中拼错了“ellipsis”。
2. text-overflow 属性将被忽略，而无需指定添加值为 nowrap 的 white-space 属性。
3. 之后，您需要在 jQuery 中删除并重新添加 white-space 属性。

这是 another modified JSFiddle demo考虑到以上所有因素。