今天,我们要讲的是单行与多行省略号的 CSS 实现。
单行省略号
主要是用 text-overflow 属性,但为了截断也要用 overflow 和 width 属性。
多行省略号
首先,用 flex: -webkit-box;,将容器设置为弹性盒子模块,这是老版本的 flex,然后,设置 -webkit-box-orient: vertical; 和 -webkit-line-clamp: 3; 让其向下布局,并截断三行显示省略号,demo 同上。
今天,我们要讲的是单行与多行省略号的 CSS 实现。
主要是用 text-overflow 属性,但为了截断也要用 overflow 和 width 属性。
首先,用 flex: -webkit-box;,将容器设置为弹性盒子模块,这是老版本的 flex,然后,设置 -webkit-box-orient: vertical; 和 -webkit-line-clamp: 3; 让其向下布局,并截断三行显示省略号,demo 同上。