这个属性用的贼多,我还老是忘,今天记录一下
单行文本显示省略号
.a{
overflow:hidden; /*超出的部分隐藏起来。*/
white-space:nowrap;/*不让文本换行,在一行显示*/
text-overflow:ellipsis;/*超出显示...*/
}
多行文本超出显示省略号
-webkit-是webkit内核的前缀(Chrome)
.a{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示*/
-webkit-line-clamp:2 ;/*限制在块元素文本的行数,它需要组合其他的WebKit属性*/
-webkit-box-orient:vertical;/*设置盒子的子元素的排列方式*/
}
最后补充:
在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器),可以直接使用WebKit的CSS扩展属性
text-overflow:设置文字溢出之后的效果
值 | 描述 |
---|---|
clip | 修剪文本。 |
ellipsis | 显示省略符号来代表被修剪的文本。 |
string | 使用给定的字符串来代表被修剪的文本。 |