[分享]css3指定文本怎么设置省略号

CSS3样式表可以让我们在控制文本显示效果时更加灵活和方便。其中，指定文本显示省略号也是一种经常需要用到的效果。要实现这个效果，我们可以使用CSS3新增的textoverflow属性，以及whites...

CSS3样式表可以让我们在控制文本显示效果时更加灵活和方便。其中，指定文本显示省略号也是一种经常需要用到的效果。

要实现这个效果，我们可以使用CSS3新增的text-overflow属性，以及white-space和overflow属性来指定文本溢出后的处理方式。

首先，使用white-space属性来指定文本的显示方式，如果我们想要让文本在溢出时自动换行，则可以添加white-space: normal；如果我们希望文本不自动换行，则可以添加white-space: nowrap；

/* 文本自动换行 */
p {
  white-space: normal;
}

/* 文本不自动换行 */
p {
  white-space: nowrap;
} 

接下来，我们使用overflow属性来指定控件边界内文本的显示方式，如果我们想让文本在达到容器边界时溢出，则可以添加overflow: hidden；

p {
  white-space: nowrap;
  overflow: hidden;
} 

最后，我们添加text-overflow属性来指定文本溢出时的省略标识，可以选择省略号、自定义字符或者不显示任何标识。在本例中，我们使用省略号作为文本溢出的省略标识：

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

以上是CSS3指定文本显示省略号的实现方式，我们可以根据需要进行灵活运用，实现不同的文本显示效果。