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

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; }

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