html - 溢出 :hidden dots at the end

Question

假设我有一个字符串“我喜欢大屁股，我不能说谎”，我用 overflow:hidden 将它剪掉，所以它显示如下:

I like big butts and I cann

截断文字。是否可以这样显示:

I like big butts and I cann...

使用 CSS？

Answer 1

您可以使用 text-overflow: ellipsis;其中according to caniuse所有主流浏览器都支持。

这里是 a demo在 jsbin 上。

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}

<div class="cut-text">
I like big butts and I can not lie.
</div>