CSS 设置文本省略

当页面文本过多的时候，我们经常会截取一部分文字进行显示，然后用省略号或其它符号来提示用户还有剩余的文本，那么在 CSS 中，控制溢出文本的省略使用的是 text-overflow 属性。

text-overflow 不能单独生效，因为 CSS 默认会根据容器的宽度，把文字自动换行显示，要使 text-overflow 生效，需要设置 white-space 属性为 nowrap，让文本不换行，然后设置容器的 overflow 属性为 hidden，把文字超出部分省略，最后再设置 text-overflow 属性。

text-overflow 的默认值

text-overflow 的默认属性值为 clip，当文本超过容器宽度时，会直接截断，隐藏超出部分，示例如下：

<style>

  p {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
  }

</style>
<p>这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本</p>

预览：

示例里没有设置 text-overflow 属性，那么它的取值就是 clip，可以看到预览里边，当文字超过容器宽度之后，超出部分直接隐藏了。

text-overflow 设置省略号

如果让文本在超出的位置显示省略号，可以设置 text-overflow 值为 ellipsis，示例如下：

<style>

  p {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

</style>
<p>这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本</p>

预览：

可以看到，CSS 自动预留了省略号的位置，在文本的最后，使用了 ... 省略号，来表示文本是有剩余没有显示的。

其它属性值

text-overflow 还支持其它属性值，但是由于大部分浏览器还不支持，这里列出一下他们的效果，等浏览器支持了，你可以再回过头来查看它们的用法：

• 任意字符串。可以使用任意字符串来表示省略，而不仅仅是省略号。
• fade。 可以在文本省略的位置处，有一个淡出渐隐的效果。
• fade(长度)。可以指定淡出渐隐效果的在文本中的长度。
• 设置两个值，例如 ellipsis ellipsis，可以同时设置文本左边和右边超出时，要显示的符号。

小结

本小节介绍了 CSS text-overflow 属性的用法，用于控制文本超出时，如何显示超出部分，它必须跟 white-sapce 和 overflow 属性结合使用，以隐藏超出部分，再通过text-overflow 设置超出部分显示的样式。

text-overflow 默认值为 clip，超出部分直接截断，不显示；另一个值是 ellipsis，超出部分显示省略号。还有其它在试验中的属性，现在大部分浏览器还不支持，可以等支持以后再体验。