文字省略

class名

样式值

ellipsis-1

-webkit-line-clamp: 1;

-webkit-box-orient: vertical;

overflow: hidden;

display: -webkit-box;

word-break: break-all;

line-clamp-1

-webkit-line-clamp: 1;

-webkit-box-orient: vertical;

overflow: hidden;

display: -webkit-box;

word-break: break-all;

命名规律：{ellipsis|line-clamp}-{数值}

使用示例

ellipsis-1文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

ellipsis-2文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

html

// 实际代码
<div class="ellipsis-1">ellipsis-1文字文字文字文字文字文字文字文字文字文字文字</div>
<div class="ellipsis-2">ellipsis-2文字文字文字文字文字文字文字文字文字文字文字</div>

// 实际代码
<div class="ellipsis-1">ellipsis-1文字文字文字文字文字文字文字文字文字文字文字</div>
<div class="ellipsis-2">ellipsis-2文字文字文字文字文字文字文字文字文字文字文字</div>