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;
     }

但是问题是第一个文本本身是否太长了：

helooooooooooooooooooooo这是文本

结果不是纠正

Answer 1

尝试word-break属性，

word-break: break-all;

Answer 2

请参阅小提琴

html

<div class="div">
Helooooooooooooooooooo this is text
</div>

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;
 word-break: break-all;
 width:50px;
 background:#ccc;
 }

Answer 3

使用 eLLIPSIS

.overflow {
  width: 120px;
  height:30px;
  outline: 1px solid red;
  margin: 0 0 2em 0;
  /**
   * Required properties to achieve text-overflow
   */
  white-space: nowrap;
  overflow: hidden;
}
.ellipsis {
  text-overflow: ellipsis;
}

<div class="overflow ellipsis">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</div>