文本溢出的解决方法（单行和多行）

单行文本溢出

.ellipsis {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
}

white-space:nowrap ，作用是设置文本不换行，是overflow:hidden和text-overflow：ellipsis 生效的基础。

• white-space：设置文字在一行显示，不能换行
• text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本
• overflow：文字长度超出限定宽度，则隐藏超出的内容

多行文本溢出

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;   /* 限制显示3行 */
  text-overflow: ellipsis;
  word-break: break-all;  /*拆分所有单词，长单词也会折行 */
  overflow: hidden;
  line-height: 24px;
}

word-wrap:break-word：只对那些超出容器宽度的单词进行拆分，而不影响其他正常单词。

line-clamp：截断文本的方式有很多，line-clamp胜在可以指定行数。  

-webkit-line-clamp：可以把 块容器 中的内容限制为指定的行数。它只有在同时设置了以下2种情况才会生效：

• display 属性设置成 -webkit-box 或者 -webkit-inline-box
• -webkit-box-orient 属性设置成 vertical

overflow: hidden：在大部分情况下,也需要设置 overflow 属性为 hidden，否则，里面的内容不会被裁减，并且在内容显示为指定行数后还会显示省略号(ellipsis)。、

参考：css属性：word-wrap:break-word; 与 word-break:break-all 的用法；-CSDN博客