CSS 文本溢出时是否可能没有空白：不换行

在本文中，我们将介绍CSS中文本溢出时是否可以通过使用text-overflow: ellipsis而不需要white-space: nowrap来实现。我们将探讨这两个CSS属性以及它们在文本溢出方面的作用和关系，并通过示例说明它们的使用方法。

阅读更多：CSS 教程

text-overflow: ellipsis

text-overflow是一个CSS属性，它用于控制文本在溢出容器时的显示方式。当文本内容超出容器的宽度时，使用text-overflow属性可以用省略号(…)来代替溢出的文本。

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

在上面的示例中，我们设置了一个宽度为200px的容器，并将white-space属性设置为nowrap，这意味着文本将在容器中不换行。 overflow属性设置为hidden，以隐藏溢出的文本。最后，我们使用text-overflow: ellipsis来显示省略号(…)作为溢出文本的代替。

使用text-overflow: ellipsis且不使用white-space: nowrap

根据CSS规范，text-overflow: ellipsis属性需要与white-space: nowrap属性一起使用才能实现文本的溢出和省略号显示。这是因为white-space属性控制文本的换行行为，如果不将white-space设置为nowrap，文本将会自动换行并丢失text-overflow: ellipsis的效果。

然而，有时候我们可能希望在不使用white-space: nowrap的情况下也能实现文本溢出和省略号显示。在这种情况下，我们可以使用一些额外的CSS技巧来实现所需的效果。

.text {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

在上述示例中，我们通过将display属性设置为-webkit-box，并使用-webkit-line-clamp属性来实现文本溢出和省略号显示。-webkit-line-clamp属性指定文本所占用的行数，这里的例子中我们设置为2行。-webkit-box-orient属性用于指定文本的方向，垂直方向为vertical。

在这种情况下，我们不再需要white-space: nowrap来控制文本的换行行为。通过使用-webkit-box属性，我们实现了文本在容器中的溢出和省略号显示，而不会自动换行。

需要注意的是，这种方法使用了特定的CSS属性，因此只适用于支持WebKit引擎的浏览器。

总结

通过本文，我们了解了CSS中text-overflow: ellipsis属性用于文本溢出和省略号显示的作用。根据CSS规范，text-overflow: ellipsis需要和white-space: nowrap一起使用才能实现效果。然而，我们也介绍了一种在不使用white-space: nowrap的情况下实现文本溢出和省略号显示的方法，通过-webkit-box属性和-webkit-line-clamp属性来实现目标。需要注意的是，这种方法只适用于支持WebKit引擎的浏览器。