css 超过长度显示省略号

CSS中有一种非常常见的需求，就是超出指定长度的文本内容自动显示省略号。这种需求在很多场景下都非常有用，比如网页标题、长文章的概要等等。

.text-ellipsis {
  white-space: Nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

以上就是CSS实现超过长度显示省略号的代码。可以自定义一个class，在需要使用的地方加上这个class，比如：

<p class="text-ellipsis">这是一个很长的文本，需要显示省略号。</p>

上面的代码在浏览器中渲染出来的效果就是，文本内容超出所在容器的长度时会自动显示省略号。

具体实现原理如下：

• white-space: Nowrap，禁止任何换行，使文本在单行中显示。
• overflow: hidden，当文本内容超出容器的宽度时，隐藏溢出部分。
• text-overflow: ellipsis，当文本内容溢出容器而被隐藏时，显示带有省略号的文本。

以上就是CSS实现超过长度显示省略号的方法。如果在实际开发中遇到类似的需求，可以使用该方法快速实现。