当一行文本或者多行文本超过设计图宽度或者高度得时候,可以将超过得部分通过...的形式进行省略,有多种方法:1、使用JS的字符串截图 2、使用css进行操作。
一行时
div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
多行时
当文本有多行的时候可以通过line-clamp
属性进行设置超过的行数进行控制
div { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
截取效果
网络异常,图片无法展示
|
当然JS使用 字符串截取也可以,只不过 css相对更加方便。