text-overflow
属性可以设置以下文本省略方式:
clip
:在文本框之外裁剪文本,不显示省略号。ellipsis
:在文本框的末尾显示省略号。fade
:在文本框的末尾使用渐变效果将文本淡出到背景色。initial
:将属性重置为默认值。inherit
:从父元素继承该属性。其中,最常用的就是 ellipsis
,它可以在文本框的末尾显示省略号,可以通过以下 CSS 代码实现:
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 超出文本框隐藏 */
text-overflow: ellipsis; /* 文本省略号 */
需要注意的是,text-overflow
属性只有在以下条件下才会生效:
white-space
属性的值为 nowrap
,即不换行。overflow
属性的值为 hidden
或 scroll
,即超出文本框隐藏或滚动。因此,使用 text-overflow
属性时需要配合上述两个属性一起使用,才能实现文本省略的效果。