多行溢出在末尾添加省略号

W.A委员会2026-05-03 10:53

-webkit-box

目前最主流的方案,但是只能在webkit内核浏览器(Chrome,Safari,edge)和firefox 68+上使用,IE不兼容(IE市场占有率低,可忽略)

css 复制代码

.content{
    width:200px;/*最好设置宽度,否则宽度根据父元素自适应可能出现问题*/
    display: -webkit-box;
    -webkit-line-clamp: 5;/*设置显示行数*/
    -webkit-box-orient:vertical;/*主轴方向,默认值是horizontal即水平排列,也就是子元素(不是文本,子元素中的文本正常换行)在同一行里,会让显示行数的设置失效,改为vertival垂直排列*/
    word-break: break-all;
    text-overflow: ellipsis; /*省略号webkit会自动加,但建议保留*/
    overflow: hidden;/*webkit只是在指定截取位置加省略号,隐藏还是需要这个*/
}

注意-webkit-box-orient:vertical;必须设置,这个相当于告诉webkit是垂直排列,webkit可以根据行数截取,否则lineclamp就会失效,webkit不会截取

注意用word-break: break-all强制换行,如果不写或者white-space: normal那连续的英语单词或者数字等不会自动换行(为了保证连贯性),向右溢出的内容虽然不会影响布局,但是会覆盖右边的元素,影响视觉呈现

兼容所有浏览器的css手搓方案

父元素div,子元素文本(比如div),在父元素开头加一个div,内容是...模拟省略号
把这个省略号div设置为右环绕,此时第一行最右边是省略号,其他的文本都是正常排列
然后需要用一个元素把文本连同省略号一起顶下去这样省略号就在最后一行,可以用一个空白元素或则和直接给父元素设置一个::before(注意这里必须设置content:''和display: block因为默认伪元素是内联元素),高度为把第一行顶到最后一行即可
然后给文本元素设置负margin把文本拉起来

不需要省略号可以直接overflow: hidden