如何在HTML中关闭换行?

我觉得很傻，不能解决这个问题，但我如何关闭文字换行?css的word-wrap属性可以强制使用break-word，但不能强制使用从(只能单独使用normal值)。

我如何强制换行从?

422466 次浏览
小开
最佳答案

您需要使用CSS white-space属性。

特别地，white-space: nowrap和white-space: pre是最常用的值。第一个似乎是你想要的。

小开

增加了webkit的特定值，从上面的缺失

white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* Chrome */
word-wrap: break-word; /* IE */
小开

我想知道为什么你发现作为解决方案的“空白”与“nowrap”或“pre”，这是不做正确的行为:你强迫你的文本在一行! 文本应该断行，而不是默认的断行。这是由一些css属性引起的:换行、溢出换行、换行和连字符。所以你可以有:

word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

所以解决方案是删除它们，或者用"unset"或"normal"覆盖它们:

word-break: unset;
word-wrap: unset;
overflow-wrap: unset;
-webkit-hyphens: unset;
-moz-hyphens: unset;
-ms-hyphens: unset;
hyphens: unset;

更新:我也提供证明与JSfiddle: https://jsfiddle.net/azozp8rr/

小开

这为我工作阻止愚蠢的工作休息发生在Chrome文本区域

word-break: keep-all;
小开

如果你想要一个HTML的解决方案，我们可以使用pre标签。它定义了“预格式化文本”;这意味着它不格式化换行。下面是一个简单的例子来解释:

div {
width: 200px;
height: 200px;
padding: 20px;
background: #adf;
}
pre {
width: 200px;
height: 200px;
padding: 20px;
font: inherit;
background: #fda;
}
<div>Look at this, this text is very neat, isn't it? But it's not quite what we want, though, is it? This text shouldn't be here! It should be all the way over there! What can we do?</div>
<pre>The pre tag has come to the rescue! Yay! However, we apologise in advance for any horizontal scrollbars that may be caused. If you need support, please raise a support ticket.</pre>

小开

white-space: nowrap;:永远不会中断文本，将保持其他默认值

white-space: pre;:永远不会中断文本，将保持多个空格在另一个后面作为多个空格，如果显式地写中断将中断(在html中按enter等)


提交答案