CSS 实现单行文本、多行文本溢出显示省略号
CSS 实现单行文本、多行文本溢出显示省略号
1. 单行文本
<input class='box' value='CSS 实现单行文本溢出显示CSS 实现单行文本溢出显示CSS 实现单行文本溢出显示CSS 实现单行文本溢出显示CSS 实现单行文本溢出显示CSS 实现单行文本溢出显示CSS 实现单行文本溢出显示CSS 实现单行文本溢出显示CSS 实现单行文本溢出显示' />
.box{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:200px;}
2. 多行文本
.box{overflow:hidden; /*溢出隐藏*/
display:-webkit-box; /*弹性盒子模型显示,将对象作为弹性伸缩盒子模型显示*/
-webkit-box-orient:vertical; /*盒模型元素的排列方式,设置伸缩盒对象的子元素的排列方式*/
-webkit-line-clamp:3; /*限制块元素显示的文本行数,必须结合其他属性*/}
CSS 文章被收录于专栏
CSS