css 实现自动添加‘...’省略号，支持多行和单行显示，需要支持webkit的属性可用

Posted 2022-12-10 mjsoftwareking

css刚接触学习，记录一下用到的自带省略号的单行和多行显示，此方法需要支持webkit属性

 

 

span
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                /*修改此处为1,可实现单行显示省略号*/
                -webkit-line-clamp: 3;
                color: black;
                -webkit-box-orient: vertical;
                /*此属性控制自动换行*/
                word-break: break-all;
            

 

多行

单行