单行文本溢出显示省略号:

1.先强制一行内显示文本

        white-space:nowrap;

2.超出的部分隐藏溢出

        overflow:hidden;

3.文字用省略号代替超出的部分

        text-overflow:ellipsis;

多行文本溢出显示省略号:

一、给父元素设置

1.溢出隐藏

             overflow: hidden;

2.设置行高与容器高度成倍数关系,这样避免文本溢出时,文字显示一半
             line-height: 20px;

3.设置文本对齐方式为两端对齐,这样在伪元素内容遮盖末尾文字时才能对齐
             text-align: justify;

4.子绝父相,这里是为了给伪元素设置定位
             position: relative;

二、给父元素设置伪元素::after ,并为其设置属性

1.省略号是放在文本最后面的

         content: "...";

2.设置伪元素的宽度为1em,是为了遮盖的时候正好遮盖中原来的一个字的大小
              width: 1em;

3.设置与父元素相同的背景颜色,同理,也是为了和原来的内容样式保持一致
             background-color: pink;

4.设置定位,其位置就是文本的右下角
     position: absolute;

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐