文章很简单,直接上干货!
- 如果是想要单行文字省略,直接复制下面这个类名
1、单行文字,文字省略 .ellipsis-1 { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
- 如果需要多行显示后省略,复制下面这段代码(把这个2改成你想要的就行了)
.ellipsis-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
- 特殊情况:文字处于flex 弹性盒子内,overflow:hidden 会失效,这时候需要给父盒子加上两个属性:
div { flex:1; witdh:0; }
flex:是用来控制盒子宽度,width用来限制文字不会把弹性盒子撑大!
干货满满,对您有用的话点个赞呗!