如何溢出文本来做到这一点

Question

我有多个元素，每个元素都有short和main div。我想将short保持在一行。现在，当内容超过一行时，它会移动到下一行。但我想要的是切断剩余的文字并显示像...这样的点。这可能吗？

<div class="elem">
  <div class="short">   Text should stay on one line   </div>
  <div class="main">  </div>
</div>

.elem{
  width:150px;
}

理想情况下，当用户将鼠标悬停在标题和点...上时，他可以在简单的html弹出窗口或类似内容中看到完整标题。

Answer 1

以下CSS将在支持CSS3的浏览器中实现您想要的效果：

.elem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 150px; }
.elem:hover { white-space: normal; }

请注意，当鼠标悬停在任何部分上时，文本将会展开，而不仅仅是省略号。

Answer 2

对于Jquery解决方案，请尝试以下操作：http://jsfiddle.net/kA3uN/

$short = $('.short');
$short.html($short.html().substring(0,10) + " ...");

只需将10更改为与您的布局同意的任何字符长度。不需要CSS3！ ：d

Answer 3

您可以使用CSS的3 text-overflow: ellipsis;属性

修改

对不起，我想我点击了快速发送并没有阅读完整的问题。使用该CSS属性，您可以将文本剪切为所需的宽度。

如果你希望它在悬停时显示，你只需要使用悬停伪类增加div的宽度，如：

.elem:hover {
  width: 300px:
}