前言
在页面开发过程中我们经常会遇到文字超出范围需要显示...的情况,这里介绍一下通过css实现单行和多行显示...
一、单行文本显示...
p {
width: 100px; // 限制元素宽度
overflow: hidden; // 溢出隐藏
white-space: nowrap; // 禁止换行
text-overflow: ellipsis; // ...
}
二、多行文本显示...
p {
width: 100px; // 限制元素宽度
display: -webkit-box; // 谷歌
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 显示几行
overflow: hidden;
}
总结
直接复制到对应标签css样式里面,定义好宽度,还是很好用的