单行文本超出出现省略号
首先给用于放文本的标签元素设置一个宽度值,并设置溢出属性overflow为溢出隐藏,设置文本缩略的样式为"..."
overflow: hidden; //先设置文本超出隐藏
text-overflow:ellipsis; //文本省略号
white-space: nowrap; //文本强制不换行
我们只需要添加这三个属性那我们的页面所需要出现省略的文本就可以实现了
多行文本超出隐藏
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //可以显示几行后出现省率号
或者 ||
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //显示几行
overflow: hidden;