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这是文字

结果未正确

Answer 1

尝试word-break属性，

word-break: break-all;

Answer 2

使用 省略号

.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>

Answer 3

请参阅fiddle

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

div中的文本需要拆分并且...如果文本很长则显示为显示

3 个答案: