CSS 通过text-overflow:ellipsis实现省略号效果

在本文中，我们将介绍如何使用CSS的text-overflow属性，并结合ellipsis值，在链接中实现省略号效果。text-overflow属性可以控制当文本溢出其容器时如何显示。

阅读更多：CSS 教程

text-overflow属性

text-overflow属性是CSS中一个用于控制文本溢出时的效果的属性。通过设置text-overflow为ellipsis，可以在一行文本中添加省略号，从而提醒用户有更多内容未显示。|

下面是text-overflow属性的语法：

text-overflow: clip|ellipsis|string

clip：表示文本溢出容器时直接裁切，不显示省略号。
ellipsis：表示文本溢出容器时以省略号形式显示。
string：表示文本溢出容器时以指定的字符串替代省略号。

在本篇文章中，我们将主要关注如何使用ellipsis值来创建省略号效果。

使用text-overflow:ellipsis在链接上添加省略号

CSS中的text-overflow:ellipsis属性通常用于一段长文本的截断显示，但也可以用于链接文本的省略。下面是一个例子：

<a href="#" class="ellipsis">这是一个很长很长的链接文本，超出容器宽度</a>

.ellipsis {
  white-space: nowrap;    /* 强制不换行 */
  overflow: hidden;       /* 隐藏溢出文本 */
  text-overflow: ellipsis;  /* 显示省略号 */
  display: inline-block;  /* 使链接可截断 */
  max-width: 200px;       /* 设置最大宽度 */
}

上述示例中，我们给链接元素添加了一个ellipsis类，然后通过设置相关CSS属性来实现省略号效果。首先，通过white-space: nowrap，我们强制链接文本不换行，这样整个文本就能够保持为一行。然后，通过overflow: hidden，我们隐藏了溢出的部分，防止其破坏布局。最后，通过text-overflow: ellipsis，我们将溢出的文本以省略号的形式显示出来。

同时，我们将链接元素设置为inline-block，使得其可以被截断，而不是一直延伸到下一行。通过设置max-width属性，我们还可以控制链接元素的最大宽度，避免其过宽。

通过以上设置，我们实现了在链接文本溢出时显示省略号的效果。

示例说明

为了更好地理解如何使用text-overflow:ellipsis属性在链接上添加省略号，我们来看一个具体的示例。

假设我们有一个导航栏，其中包含多个链接。每个链接的宽度都是固定的，但某个链接的文本可能会超出其宽度，导致显示效果不佳。

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品介绍</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系方式</a></li>
</ul>

.nav li {
  display: inline-block;
  margin-right: 10px;
}

.nav li a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100px;
}

上述示例中，我们使用了一个无序列表来创建导航栏，其中包含了几个链接。每个链接的宽度通过设置max-width属性来控制，我们将其设置为100px。如果链接文本超过了100px的宽度，就会自动隐藏溢出的部分，并以省略号形式显示。

通过设置.white-space: nowrap，我们强制链接文本不换行。同时，通过设置overflow: hidden，我们隐藏了溢出的部分，使其不影响导航栏的整体布局。最后，通过text-overflow: ellipsis，我们添加了省略号的效果。

这样，当链接文本超出100px的宽度时，就会在末尾显示省略号。