html - 使用 CSS 修剪 div 中的 HTML 文本

Question

为了显示新闻标题列表，我需要一个固定 max-height 的 div。

div 应该在文本溢出 div 时截断文本，并在截断的情况下以省略号结束...

#lipsum {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-height: 75px;
  height: 75px;
  width: 100%;
}

<div id="lipsum">
  <p>
    Duis eget sapien leo. Vivamus dignissim elit eget enim varius, vel condimentum tellus sodales. Vestibulum scelerisque lectus at mauris elementum finibus. Ut enim risus, venenatis sagittis mi ac, facilisis lacinia nunc. Nam ornare urna tortor, a vehicula nisl facilisis quis. Etiam enim sem, ornare a hendrerit et, convallis id quam. Ut tincidunt facilisis tincidunt. Mauris sodales euismod orci, a tincidunt massa fermentum sed. Mauris odio quam, auctor ac viverra vitae, condimentum feugiat mauris. Phasellus fermentum velit sit amet orci interdum dignissim. Praesent venenatis aliquet magna, at hendrerit felis condimentum maximus. Fusce cursus, nulla at suscipit iaculis, magna odio bibendum arcu, a tincidunt diam sapien sit amet nisl. Nullam non risus et metus tempus finibus tempus in libero. Maecenas auctor eget mauris non malesuada. Quisque erat tellus, facilisis quis mauris quis, lacinia tristique orci. Suspendisse dignissim nibh et mi consequat venenatis.
  </p>
</div>

我的问题是，如果只有一行，现有的行为是可以的，但我不需要一行，而是几行文本直到最大max-height ...

Answer 1

您可能需要引用以下帖子:

With CSS, use "..." for overflowed block of multi-lines

看起来有人也发表了一篇关于该主题的文章。虽然，解决方案似乎与问题有点无关:

https://css-tricks.com/line-clampin/

最后，这是一个 .js 解决方案:

Insert ellipsis (...) into HTML tag if content too wide

编辑:要添加到此资源列表，这里是一个纯 css 解决方案。

http://codepen.io/martinwolf/pen/qlFdp

*请注意，并非所有浏览器都支持 text-overflow:ellipsis;。最后，这是针对该问题的 .js 解决方案: