如何防止文本占据超过一行的空间？

Question

有没有一个单词换行或其他属性可以防止文本换行？我设定了高度和overflow:hidden，但文本仍然会折行。

需要在CSS3之前的所有浏览器中都能运行。

- Franky

Answer 1

div {
  white-space: nowrap;
  overflow: hidden;
}

<div>testing quite a lot of text that just doesn't wrap because it is too long a run-on sentance with so many useless words for you to not read today despite every effort you make to do so including stretching your browser width to the maximum length unless however you utilized your browser's zooming out feature or manually modifying the CSS in which case you are definitely cheating and ruining this fun little game of me typing out as many words as can be fitted into one ridiculously long run-on sentence of the twenty-first century anno domini using my traditional keyboard and two monitors at 1080p while going through every effort to painstakingly ramble on and on but just not exactly repeating myself short of reusing a couple of words in multiple places throughout this HTML even though that would be about a thousand times easier than what I'm currently doing on this day to pointlessly avoid work regardless of its futility given that it'll only create consequences for myself in having to work harder to catch up later of course all of that notwithstanding moderation efforts to tone back my extensive efforts to make this somewhat enjoyable to read while making it as long as possible who may or may not revert this edit in spite of its usefulness since the previous edit only contained four words that could not possibly wrap even without the CSS changes due to their short nature which is invariably going to create more questions than it answers such as can be found in the comments section which is exactly why I created this effort in order to address one of those about the purpose of the overflow attribute which if you have modified you will now see lets you read the entirety of this text through the benefits of horizontal scrolling features but on the other hand if only overflow was used and text-wrap was left out then you will continue to see a vertical scrollbar unless you set a fixed height for this div in which case you certainly should see that vertical overflow is hidden though that would only happen if you did not put this example into fullscreen short of having your viewport set to a small enough height which can actually be further defined to a designated number of lines as opposed to one by using a height set to a multiple of the CSS property defined by line-height which could be a percentage of white-space and that would indeed hide the vertical overflow of this mountain of text which I'm really quite surprised that you managed to linger on here to read through its frivolous nature on the famed site known by programmers as Stack Overflow and for that I congratulate you for potentially wasting your time</div>

注意：这仅适用于块级元素。如果您需要对表格单元格执行此操作（例如），则需要在表格单元格中放置一个div，因为表格单元格具有display：table-cell而不是块级元素。

从CSS3开始，这也支持表格单元格。

- cletus

---

还有一个叫做 word-wrap 的专有 ie 属性（如果我没记错的话）...可恶的 IE。 - garrow

请考虑使用 "text-overflow: ellipsis;"。如果文本超出了容器的宽度，则它会在文本末尾添加省略号(...)。 - Drew Landgrave

我认为“这仅适用于块级元素”的注释是正确的。如果您在锚点、段落、标题等中尝试此操作，则无法正常工作。您需要执行类似于 p.oneline { white-space:nowrap; overflow:hidden; display:block;} 的操作。 - Alex Angelico

小心隐藏溢出；这意味着严重的问题。 - David A. Gray

有人能解释一下为什么这里要将溢出属性设置为隐藏吗？ - user9628338

Answer 2

你可以使用CSS的white-space属性来实现这个效果。

white-space: nowrap;

- Robert C. Barth

Answer 3

使用 text-overflow: ellipsis 可以在最后添加 ...。

div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

- Vivek

---

这是一个。 - richardwhatever

Answer 4

为了更加清晰明了，这个方法可以很好地处理段落和标题等内容。您只需要指定display: block即可。

例如：

<h5 style="display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
  This is a really long title, but it won't exceed the parent width
</h5>

（忽略内联样式）

- Duncan Jones

Answer 5

有时，使用 代替空格是可行的。显然，它有缺点。

- grossvogel

---

很遗憾，在这种情况下我不能做到。 - Franky

Answer 6

如果您想要防止文本换行，并确保它在容器内保持单行显示，您可以使用white-space属性，并将其值设置为nowrap。这在旧版浏览器中也适用。

以下是一个示例：

.container {
  white-space: nowrap;
  overflow: hidden;
}

将 .container 替换为您实际容器元素的类或ID。这样可以确保文本不换行，始终保持在一行上。

- Jatin Dahiya