如何使用jQuery将列表项中的字符按一定长度截断

Question

我有问题的文本覆盖，我不想使用水平滚动，因为在我的列表中的一些字符串可能会非常长。因此，与其使用溢出:隐藏，或溢出:滚动，或溢出:覆盖，我宁愿削减字符长度添加.并就列表项的悬停执行通知。

例如：

<ul>
 <li>Black Coffee, Egyptian</li>
 <li>Green Tea</li>
 <li>Condensed Milk</li>
</ul>

产

• 黑咖啡.
• 绿茶
• 浓缩牛奶

论Hover制作盒式覆盖

埃及黑咖啡(有机咖啡，盒装咖啡)

Answer 1

这可以使用css实现，请在下面找到代码片段：

​

div.a {
  white-space: nowrap; 
  width: 50px; 
  overflow: hidden;
  text-overflow: clip; 
  border: 1px solid #000000;
}

div.b {
  white-space: nowrap; 
  width: 50px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  border: 1px solid #000000;
}

div.c {
  white-space: nowrap; 
  width: 50px; 
  overflow: hidden;
  text-overflow: "----"; 
  border: 1px solid #000000;
}

<h2>text-overflow: clip (default):</h2>
<div class="a">Hello world!</div>

<h2>text-overflow: ellipsis:</h2>
<div class="b">Hello world!</div>

<h2>text-overflow: "----" (user defined string):</h2>
<div class="c">Hello world!</div>

​