CSS 没有使用JavaScript，我能否在文本过长时显示不同的文本

在本文中，我们将介绍如何使用纯CSS实现在文本过长时显示不同的文本的效果。通常情况下，当文本内容超出所分配的空间时，浏览器会自动截断文本并显示省略号。但是有些场景下，我们可能希望在文本超出一定长度时显示其他替代文本，而不是简单地以省略号代替。

阅读更多：CSS 教程

CSS text-overflow属性

CSS提供了text-overflow属性，它可以用来控制在文本超过分配空间时如何处理。

显示省略号

首先，我们来看一下最常见的情况，即显示省略号。通过设置text-overflow为ellipsis，可以让超出的文本显示为省略号。示例如下：

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

<div class="overflow-example">
  This is a very long text that may not fit in the allocated space.
</div>

上述代码中，使用white-space属性将文本强制在一行显示，overflow属性用来隐藏超出分配空间的文本，而text-overflow属性则用来显示省略号。设置了一个宽度为200px的容器，当文本超过该宽度时，将显示省略号。

显示特定文本

除了省略号，CSS还提供了一种方法，在文本超出分配空间时显示特定的替代文本。通过结合使用text-overflow的clip属性和伪元素::after，我们可以实现这个效果。示例如下：

.show-different-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  width: 200px;
  position: relative;
}

.show-different-text::after {
  content: "... (More)";
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: white;
}

<div class="show-different-text">
  This is a very long text that may not fit in the allocated space.
</div>

上述代码中，通过设置text-overflow为clip，可以让超出的文本不显示省略号，而是被截断隐藏。然后通过::after伪元素添加额外的文本内容，当超出的文本被隐藏时显示。

CSS的局限性

纯CSS的方式虽然可以实现在文本过长时显示不同的文本的效果，但也有一些局限性。

首先，纯CSS方式无法动态获取文本长度。如果需要根据实际文本长度来决定是否显示替代文本，或者显示不同的替代文本，就需要借助JavaScript来实现。

其次，纯CSS方式只能控制在文本结束时显示替代文本，无法控制在文本中间显示。只能通过设置固定宽度来实现在文本结束时显示替代文本，而无法根据文本内容的字符数动态控制显示位置。

另外，纯CSS方式对于中文文本可能会存在一定的问题。因为中文字符的宽度一般比英文字符宽度大，当使用固定宽度时，可能导致字符被截断显示不全或者显示省略号的位置不准确。

总结

通过使用CSS的text-overflow属性，我们可以实现在文本过长时显示不同的文本的效果。可以使用ellipsis显示省略号，也可以结合clip和伪元素::after显示特定的替代文本。然而，纯CSS的方式存在一些局限性，无法动态获取文本长度、无法控制在文本中间显示文本、以及在处理中文文本时可能存在问题。在实际开发中，可以根据具体需求选择合适的方式来处理文本溢出问题。