CSS省略号的制作

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

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;