如何使用css将多出范围的字变为...

话不多说,上代码

呈一行效果:

width: 100px;
text-overflow: ellipsis; //将文本溢出显示为(…)
white-space: nowrap; //强制显示为一行
overflow: hidden;//溢出隐藏

呈多行效果:

width: 100px;
height: 50upx;
overflow: hidden;
text-overflow: ellipsis;//超出部分省略号
word-break: break-all;//break-all(允许在单词内换行) 
display: -webkit-box;//对象作为伸缩盒子模型显示 
-webkit-box-orient: vertical;//设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 3;//呈几行排列  我这里设置的三行,可自行调整

你可能感兴趣的:(前端,css3)