[分享]css内容超出三个点显示

CSS内容超出三个点显示是一种CSS的文本超出隐藏技巧，当文本过长时，会在尾部加上“...”以显示省略号，从而美观地展现文本内容。 实现这个效果的CSS属性为textoverflow，这个属性可以设置...

CSS内容超出三个点显示是一种CSS的文本超出隐藏技巧，当文本过长时，会在尾部加上“...”以显示省略号，从而美观地展现文本内容。 实现这个效果的CSS属性为text-overflow，这个属性可以设置三个值，分别为： text-overflow: clip； text-overflow: ellipsis； text-overflow: string； 其中，text-overflow: ellipsis；就是在文本过长时，显示省略号的语法。需要注意的是，在使用text-overflow:ellipsis；时，需将overflow:hidden；和white-space:nowrap；一起使用才能实现这个效果。 下面我们来看一下代码的实现过程：

某些段落的文本内容可能非常长，展示时会造成页面的不美观。为了解决这个问题，我们可以使用CSS的text-overflow属性进行处理。

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

在上述CSS代码中，我们首先设置了段落的宽度为200px，然后将溢出的文本内容进行隐藏，并将文本内容的空白符去除。最后，我们通过text-overflow: ellipsis；将省略号展示在文本内容的最后。

通过使用text-overflow属性，不仅可以美化页面内容，还可以为用户提供更好的阅读体验。在实际开发中，我们可以灵活运用这种技巧，让网站内容更加令人满意。