如果文本不适合 CSS 一行，则隐藏文本

Question

我有一个 div 元素，其中包含一些文本。该元素具有固定宽度。如果文本太长以至于不能放在一行中，我想隐藏该文本（整个文本，而不仅仅是额外的行）。否则显示文本。

这可以用 CSS 完成吗？

在 html 中添加一些有助于实现此目的的附加元素是可以接受的。

原文由 Luka 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

1. 将您的文本放在带有 white-space: nowrap 的内联块内部包装器中，以防止换行。
2. 在该内部包装器之前插入一个空的内联块伪元素。
3. 当内包装比外包装宽时，它将移动到外包装的第二行。
4. 要隐藏它，请使用 overflow: hidden ，并将相同的值设置为 height 和 line-height 。

 .outer-wrapper {
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2em;
  border: 1px dotted black;
  margin: 1em;
}
.outer-wrapper::before {
  content: '';
  display: inline-block;
}
.inner-wrapper {
  display: inline-block;
  white-space: nowrap;
}

 <div class="outer-wrapper">
  <div class="inner-wrapper">
    this is a short line
  </div>
</div>
<div class="outer-wrapper">
  <div class="inner-wrapper">
    this is a super long line of text that it is never ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever going to fit on a single line!
  </div>
</div>

原文由 Oriol 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

其他评论中提出的解决方案已经过时，今天我们有一个非常 简单 的方法来使用 text-overflow 来做到这一点。

注意： text-overflow: string 仅适用于 Firefox 。

注2： text-overflow 仅在 容器的溢出属性 值为 hidden 、 scroll 或 auto 和 white-space: nowrap; 时发生。

 .a {
  white-space: nowrap;
  width: 50px;
  overflow: hidden;
  text-overflow: clip;
  border: 1px solid #000000;
}

.b {
  white-space: nowrap;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000000;
}

.c {
  white-space: nowrap;
  width: 50px;
  overflow: hidden;
  text-overflow: "----";
  border: 1px solid #000000;
}

 <h1>The text-overflow Property</h1>

<p>The following two divs contains a text that will not fit in the box.</p>

<h2>text-overflow: clip (default):</h2>
<div class="a">Hello world!</div>

<h2>text-overflow: ellipsis:</h2>
<div class="b">Hello world!</div>

<h2>text-overflow: "----" (user defined string):</h2>
<div class="c">Hello world!</div>

在这里 您可以找到 本文 中的示例和更完整的解释。

原文由 trayingHardFi 发布，翻译遵循 CC BY-SA 4.0 许可协议