文字超出显示...是怎么实现的？

Question

不是单行的，不是只适用于chrome。
类似知乎 简书的那种，多行文本同时显示...
只在css上做文章可以实现么？

Answer 1

    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

Answer 2

简单的就直接使用 -webkit-line-clamp

.line-clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  max-height: 4.5em; /* line-height: 1.5em, so it's 1.5em * 3 */
  -webkit-box-orient: vertical;
}

参考 这里：
https://codepen.io/yangg/pen/...

复杂就用这种
http://hai.li/2017/03/08/css-...

Answer 3

搬运一下。。。

stackoverflow

css tricks

hacking ui

Answer 4

也遇到过同样的问题简书是取90个字符知乎好像是后端截取好的