当前位置：文江博客话题详情

如何阻止文本占用超过 1 行？

发布于 2024-07-13 19:21:35 字数 109 浏览 4 评论 0原文

是否有自动换行或任何其他属性可以阻止文本换行？我有一个高度和overflow:hidden，但文本仍然中断。

需要在 CSS3 之前的所有浏览器中工作。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谜兔 2024-07-20 19:21:35

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，因为表格单元格具有显示表格单元格而不是块。

从 CSS3 开始，表格单元格也支持此操作。

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>

Note: this only works on block elements. If you need to do this to table cells (for example) you need to put a div inside the table cell as table cells have display table-cell not block.

As of CSS3, this is supported for table cells as well.

回复收藏 0 原文

幽蝶幻影 2024-07-20 19:21:35

您可以使用 CSS white-space属性来实现这一点。

white-space: nowrap;

You can use the CSS white-space property to achieve this.

white-space: nowrap;

回复收藏 0 原文

缱倦旧时光 2024-07-20 19:21:35

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

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

Using text-overflow: ellipsis will add the ... at the last.

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

回复收藏 0 原文

別甾虛僞 2024-07-20 19:21:35

明确地说，这可以很好地处理段落、标题等。您只需指定 display: block 即可。

例如：

h5 {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<h5>
  This is a really long title, but it won't exceed the parent width.
</h5>

Just to be crystal clear, this works nicely with paragraphs, headers, etc. You just need to specify display: block.

For instance:

h5 {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<h5>
  This is a really long title, but it won't exceed the parent width.
</h5>

回复收藏 0 原文

遗失的美好 2024-07-20 19:21:35

有时使用代替空格会起作用。但显然它也有缺点。

回复收藏 0 原文

_畞蕅 2024-07-20 19:21:35

如果要防止文本换行并确保其在容器内保持在单行上，则可以使用值为 nowrap 的 white-space 属性。这也适用于较旧的浏览器。

下面是一个示例：

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

将 .container 替换为实际容器元素的类或 ID。这将确保文本不会换行并保持在一行上。

If you want to prevent text from wrapping and ensure it stays on a single line within a container, you can use the white-space property with the value nowrap. This works in older browsers as well.

Here's an example:

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

Replace .container with the class or ID of your actual container element. This will make sure the text doesn't wrap and stays on a single line.

回复收藏 0 原文

乱世争霸 2024-07-20 19:21:35

目前正在为此目的直接引入相当新的 text-wrap CSS 属性，以将文本破坏与空白折叠分开。要使内容溢出容器而不是创建新行，请将其与 nowrap 值一起使用：

.one-line-only {
  text-wrap: nowrap;
}

有关更多详细信息，请在此处阅读完整文档：
https://developer.mozilla.org/en-US/ docs/Web/CSS/text-wrap

截至撰写本答案时，浏览器采用率目前为 71.33%：
https://caniuse.com/?search=text-wrap%3A%20nowrap< /a>

The fairly new text-wrap CSS property is currently being introduced directly for this purpose, to separate text breaking from white space collapsing. To make the content overflow the container instead of creating a new line, use it with the nowrapvalue: