[分享]css3文字溢出加省略号

CSS3中的文字溢出加省略号是一个非常实用的功能，用于在一定宽度范围内显示任意长度的文本，当文本内容超过容器的宽度时，自动隐藏并添加省略号，以免影响页面布局和美观度。textoverflow: ell...

CSS3中的文字溢出加省略号是一个非常实用的功能，用于在一定宽度范围内显示任意长度的文本，当文本内容超过容器的宽度时，自动隐藏并添加省略号，以免影响页面布局和美观度。

text-overflow: ellipsis; 
white-space: nowrap; 
overflow: hidden; 

以上三个属性是实现文字溢出加省略号的关键，下面分别介绍它们的作用：

text-overflow: ellipsis;

表示在文本溢出的位置显示省略号。需要注意的是，这个属性只对已经定义了 overflow 属性的元素起作用。

white-space: nowrap;

表示当文本超出其容器时，文字不换行。

overflow: hidden;

表示文本溢出时隐藏超出容器部分。

下面是一个例子：

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

在上面的例子中，容器的宽度为200px，当文本长度超过200px时，文本内容就会被隐藏并用省略号替代。如果你想让这个容器支持多行文本，就需要用到CSS3的另一个属性word-wrap，将其设置为break-word即可。

.container {
  width: 200px;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  word-wrap: break-word;
} 

以上就是CSS3文字溢出加省略号的简单介绍和实现方式，希望对你有所帮助。