文本超出为省略号在很多位置都会用到,作为一个基本样式或者说原子类样式,我们需要知道其实现原理为什么。
文字内容过多,超出盒子模型的内容显示为省略号。提示:无论是单行还是多行文本,都需要设置高度,行高,超出不可见。(仅供参考)
.demo{
white-space:nowrap;(超出不换行,默认为换行的)
text-overflow:ellipsis;(省略号样式)
//代码部分 完整部分
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
white-space:normal;(超出宽度换行)
text-overflow: ellipsis; (省略号样式)
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;(行数)
display: -webkit-box;(展示盒子模型类型)
//代码部分(供拷贝)
overflow:hidden;
white-space:normal;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
display: -webkit-box;