如果要将省略号（…）应用于一行文本，CSS可以通过该
text-overflow属性使此操作变得容易。仍然有些棘手（由于所有要求，请参阅下文），但
text-overflow使之成为可能且可靠。
但是，如果要在多行文本上使用省略号（如此处的情况），那么不要指望有什么乐趣。CSS没有执行此操作的标准方法，变通办法是命中注定的。
单行文字的省略号
使用text-overflow，可以将省略号应用于一行文本。必须满足以下CSS要求：
- 必须有一个width，max-width或flex-basis
- 一定有 white-space: nowrap
- 必须具有overflow除visible
- 必须为display: block或inline-block （或功能等效项，例如弹性商品）。
所以这将工作：
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仅凭此要求就消除了这种可能性。）
