Skip to content

文本溢出隐藏

overflow: hidden 能轻易地实现文本溢出溢出,我们重点讨论的是如何在文本隐藏的同时显示省略号。

首先我们要熟悉三个css属性:

  • overflow:指定溢出元素的内容如何处理
  • white-space:指定如何处理元素中的空白和换行符
  • text-overflow:指定溢出文本如何处理

实现文本溢出显示省略号的关键是 text-overflow 属性,它的前提条件是文本真的有溢出。

默认情况下文本会自动换行,甚至溢出盒子,这时候是看得见的,通过设置 overflow: hidden 可以隐藏溢出的文本。 如果不想要换行,又得设置 white-space: nowrap。 最后,通过设置 text-overflow: ellipsis 来显示省略号。

单行文本溢出隐藏

css
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

效果如下:

这是一段很长的文本,我要让它溢出隐藏

这是一段很长的文本,我要让它溢出隐藏

多行文本溢出隐藏

当盒子的 display 设置为 -webkit-box 并且 -webkit-box-orient 设置为 vertical 时,可以使用 -webkit-line-clamp 属性来限制文本的行数。

css
.text-overflow {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

效果如下:

这是一段很长的文本,我要让它溢出隐藏

参考

最近更新于:

Released under the MIT License