要在CSS中实现超出长度显示省略号的效果,你可以使用以下属性:
overflow
:该属性定义了当内容溢出元素框时发生的事情,此处我们将它设为hidden
,意味着溢出的内容会被隐藏。white-space
:该属性设置如何处理元素内的空白,我们将其设为nowrap
,这样文本就不会自动换行。text-overflow
:此属性定义如何显示被覆盖的溢出内容,我们将其设为ellipsis
,这样就会在文本末尾显示省略号(...)。
示例代码如下:
.ellipsis { | |
overflow: hidden; | |
white-space: nowrap; | |
text-overflow: ellipsis; | |
} |
然后,将该样式应用到你的HTML元素上,例如:
<div class="ellipsis">这是一段很长的文本,会超出容器的范围。</div> |
这样,当文本长度超出div
容器的宽度时,就会在文本末尾显示省略号。