要使用 CSS 实现多行文本溢出时自动省略的效果,需要使用 CSS 属性 text-overflow
和 overflow
。其中,text-overflow
属性用于指定文本溢出时如何显示省略号,而 overflow
属性用于指定溢出内容的处理方式。
具体实现步骤如下:
white-space
属性将文本强制换行,以便在容器中显示多行文本。overflow
属性设置为 hidden
,以隐藏溢出的文本内容。text-overflow
属性将文本溢出时的省略号样式设置为 ellipsis
。示例代码如下所示:
.container {
width: 300px;
height: 100px;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
}
需要注意的是,这种方式只适用于固定宽度的容器,如果容器宽度不固定,则需要使用 JavaScript 来实现自适应省略。