css文字换行,总共两行,超过第二行的内容省略号展示

1,333 阅读1分钟

目的

想要用css达成文字换行的效果,总共两行,超过第二行的内容用省略号展示。

效果

image.png

代码

/* 溢出不换行 */
/* white-space: nowrap; */
/* 溢出隐藏 */
overflow: hidden;
/* 溢出隐藏部分省略号 */
text-overflow: ellipsis;
/* 两行字 */
/* 自动换行 */
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 2; // 2行
-webkit-box-orient: vertical;