css 文本溢出省略号处理方法

单行文本溢出

/* 块级元素才能用 overflow */
display: block; 
/* 不换行 */
white-space: nowrap; 
/* 溢出隐藏 */
overflow: hidden;
/* 溢出省略号显示 */
text-overflow: ellipsis;

多行文本溢出

/* 溢出隐藏 */
overflow: hidden;
/* 溢出省略号显示 */
text-overflow: ellipsis;
/* 基于内核 */
display: -webkit-box;
/* 设置对齐模式 */
-webkit-box-orient: vertical;
/* 行数 */
-webkit-line-clamp: 2;

多行在除了 webkit 之外没找到很好的方便的省略号显示方法，可以选择直接隐藏好，然后在标签的 title 属性上绑定想要显示的文本。

赏

谢谢你请我吃糖果

支付宝

微信