/*第一步: 溢出隐藏 /
overflow: hidden;
/ 第二步:让文本不会换行, 在同一行继续 /
white-space: nowrap;
/ 第三步:用省略号来代表未显示完的文本 */
text-overflow: ellipsis;
}
在实际中,除了上面那种单行省略号以外,还有这种在第二行甚至更多行后,超出部分的文字再显示省略号。
.box {
/* 限定范围 */
width: 300px;
height: 40px;
border: 1px solid red;
/* 1.溢出隐藏 */
overflow: hidden;
/* 2.用省略号来代替超出文本 */
text-overflow: ellipsis;
/* 3.设置盒子属性为-webkit-box 必须的 */
display: -webkit-box;
/* 4.-webkit-line-clamp 设置为2,表示超出2行的部分显示省略号,如果设置为3,那么就是超出3行部分显示省略号 */
-webkit-line-clamp: 2;
/* 5.字面意思:单词破坏:破坏英文单词的整体性,在英文单词还没有在一行完全展示时就换行 即一个单词可能会被分成两行展示 */
word-break: break-all;
/* 6.盒子实现多行显示的必要条件,文字是垂直展示,即文字是多行展示的情况下使用 */
-webkit-box-orient: vertical;
}
因篇幅问题不能全部显示,请点此查看更多更全内容