如何隐藏比其父 div 长的文本 - CSS

在网页设计中，有时候会出现文本比其所在的父元素长的情况。这时候该怎么办呢？CSS 中提供了一种方式来隐藏这部分长出来的文本，这就是 text-overflow 属性。

text-overflow 属性

text-overflow 属性被用于指定当文本溢出其容器时应该如何处理。有三个可选值：

• clip： 溢出内容会被裁剪；
• ellipsis： 溢出内容会以省略号形式展示；
• fade： 溢出内容会逐渐消失。

这里我们只需使用 ellipsis 选项，也就是用省略号形式隐藏长文本。

隐藏长文本的例子

我们来看一个例子，假设有一个 div 元素，宽度为 200px，文本内容为 "This is a long text that needs to be hidden."。

<div class="container">
  This is a long text that needs to be hidden.
</div>

我们想要隐藏这段超出容器的文本，可以使用以下 CSS 代码：

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

• overflow: hidden; - 将溢出内容隐藏。
• white-space: nowrap; - 防止文本被换行。
• text-overflow: ellipsis; - 使用省略号隐藏溢出内容。

这段代码会将文本阶段在容器中，并使用省略号替换长文本，效果如下：

总结

使用 text-overflow 属性可以轻松地隐藏元素中长文本，其具体操作为：

1. 将容器的 overflow 属性设置为 hidden；
2. 将容器的 white-space 属性设置为 nowrap；
3. 将容器的 text-overflow 属性设置为 ellipsis。

best practice:如果只想在某些浏览器下使用text-overflow，可以这样定义：

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

这样可以在 Chrome 和 Safari 中使用，但如果要在 Firefox 和 IE 等其他浏览器中使用，需要提供候选方案（fallback solution）。