文本溢出隐藏
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;
}
效果如下:
这是一段很长的文本,我要让它溢出隐藏