超出部分显示省略号

/*第一步： 溢出隐藏 /
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;
}