html - div 内的文本需要拆分并且...如果文本很长则显示

Question

我有一个要求，我需要在 div 中显示文本。很少有情况，如果文本长度太长，我需要拆分文本并将其显示到第二行

e.g: 
Input:
Hello Every Body this is long text

Output:
Hello Every Body
This is...

我已经尝试通过我们下面的 css 实现解决方案，

 .div{
     overflow: hidden;
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     line-height: 10px;
     height: 20px;
     font-size:13px;
     text-align: left;
     }

但问题是如果第一个文本本身太长，例如:

Helooooooooooooooooooo this is text

结果不正确

Answer 1

试试 word-break 属性，

word-break: break-all;