HTML,CSS学习笔记
CSS实现单行,多行文本超出时显示为省略号
1.单行溢出时,显示省略号
width: 200px;
height: 50px;
border: 1px solid #cccccc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
显示结果:
2.单行或者多行溢出的时候,显示省略号
//将对象作为弹性伸缩盒子模型显示
display: -webkit-box;
//设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;
//限制在一个块元素显示的文本的行数
-webkit-line-clamp: 2;
overflow: hidden;
//这里使用webkit,是因为为了让它适应于webkit浏览器和移动端
显示结果:
但是这里,如果你在文字后面加了很多数字的时候就会显示的不一样,
这时需要加 对数字和英文字母 折行的代码:
word-wrap: break-word;
word-break: break-all;
这样显示结果就很完美!
(上面笔记,如果对你有帮助请关注我,往后还会持续更新~~)