如果CSS不适合一行，则隐藏文本 [英] Hide text if it doesn't fit in one line with CSS

问题描述

我有一个 div 元素，其中包含一些文本。此元素的宽度固定。如果文本太长以至于不能容纳在一行中，那么我想隐藏该文本（整个文本，而不仅仅是多余的行）。否则，显示文字。

I have a div element which contains some text. This element has fixed width. If the text is so long that it cannot fit in one line, I want to hide that text (the whole text, not just extra lines). Otherwise show the text.

可以使用CSS吗？

在html中添加一些有助于完成此操作的其他元素是

Adding some additional elements in html that can help to accomplish this is acceptable.

推荐答案

1. 将文本放入带有<$ c $的内联块内部包装器中c> white-space：nowrap 以防止换行。


2. 在该内部包装器之前插入一个空的inline-block伪元素。


3. 当内部包装的宽度大于外部包装的宽度时，它将移至外部包装的第二行。


4. 要隐藏它，请使用溢出：隐藏，并将相同的值设置为 height 和 line-height 。

1. Place your text in an inline-block inner-wrapper with white-space: nowrap to prevent line breaks.
2. Insert an empty inline-block pseudo-element before that inner-wrapper.
3. When the inner-wrapper is wider than the outer-wrapper, it will be moved to the second line of the outer-wrapper.
4. To hide it use overflow: hidden, and set the same value to height and 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>

这篇关于如果CSS不适合一行，则隐藏文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！