如果要将省略号(…)应用于一行文本,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仅凭此要求就消除了这种可能性。)