如果要将省略号（…）应用于一行文本，CSS可以通过该text-overflow属性使此操作变得容易。仍然有些棘手（由于所有要求，请参阅下文），但text-overflow使之成为可能且可靠。
但是，如果要在多行文本上使用省略号（如此处的情况），那么不要指望有什么乐趣。CSS没有执行此操作的标准方法，变通办法是命中注定的。
使用text-overflow，可以将省略号应用于一行文本。必须满足以下CSS要求：
所以这将工作：
p {
width: 200px;
white-space: Nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ddd;
margin: 0;
}
<p>
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
This is a test of CSS <i>text-overflow: ellipsis</i>.
</p>
jsfiddle版本
但是，尝试删除width，或者将overflow默认值设置为visible，或者删除white-space: Nowrap，或者使用除块容器元素（AND）之外的其他内容，省略号都失败了。
这里的一大收获：text-overflow: ellipsis对多行文字没有影响。（white-space: Nowrap仅凭此要求就消除了这种可能性。）
602392714
清零编程群