CSS省略号的制作
1.先强制一行内显示文本white-space:nowrap;2.超出的部分隐藏溢出overflow:hidden;3.文字用省略号代替超出的部分text-overflow:ellipsis;一、给父元素设置1.溢出隐藏overflow: hidden;2.设置行高与容器高度成倍数关系,这样避免文本溢出时,文字显示一半line-height: 20px;3.设置文本对齐方式为两端对齐,这样在伪元素
单行文本溢出显示省略号:
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;
更多推荐
所有评论(0)