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

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

当你的jQuery代码在关闭时将其高度设置为18px时，只需添加以下内容：

auto

Modified JSFiddle

最重要的是：

您拼写过＆＃34;省略号＆＃34;您的ul li { height: 18px; ... }媒体资源不正确。
text-overflow属性将被忽略，而不指定添加text-overflow属性值为white-space。
完成此操作后，您需要在jQuery中删除并重新添加nowrap属性。

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

Answer 2

首先，设置为ellipsis，而不是elipsis，请注意双l。此外，您没有约束li元素的大小，因此该设置将不起作用。您需要在元素上设置width，并默认停止元素包装。

然后，为了实现扩展逻辑，您可以在点击时切换一个类，从而撤消使text-overflow工作所需的CSS规则。试试这个：

$("li").on("click", function() {
  $(this).toggleClass('expand');
});

div {
  width: 250px;
  background-color: lightgrey;
}
div ul {
  text-align: left;
  padding: 0 10px;
}
ul li {
  list-style-position: inside;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
ul li.expand {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li id="a">normal length text</li>
    <li id="b">this is a reletively 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 extremdsfsdfs sgdfdsfgdfg ertwerr wee www ely long, pointless text</li>
  </ul>
</div>

Answer 3

溢出后

后，无需javascript添加...

ul li {
  list-style-position: inside;
  overflow: hidden;
  text-overflow: elipsis;
  white-space: nowrap;
  text-overflow: ellipsis;
}

然后点击li

时更改white-space属性

$("li").on("click", function() {
  $(this).css('white-space','normal');
});

亲自试用https://jsfiddle.net/tcfLgom9/3/

CSS \ JS - 默认情况下扩展了长文本（应该隐藏溢出）

3 个答案: