Html 通过 CSS 强制自动换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18891755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Force word wrap through CSS
提问by Daft
At the moment TEST TEST appear side by side. How can I push one down onto a second line? Only through CSS.
此时 TEST TEST 并排出现。我怎样才能把一个推到第二行？只能通过 CSS。
<div id="box"><p>TEST TEST</p></div>
#box{
height: 50px;
text-align: center;
position: relative;
margin: 0 auto;
background-color: red;
color: white;
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
回答by Amit
<html><head>
<style>
#box {
width:5px;
display:table;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</style></head>
<body>
<div id="box">TEST TEST</div>
</body>
</html>
回答by Itay
Assuming you're trying to make the element always show one word in a line, you can use the CSS word-spacingproperty.
假设您试图让元素始终在一行中显示一个单词，您可以使用 CSSword-spacing属性。
#box {
word-spacing: 30000px;
}
- P.S - You can set this property to a very large value (
32767pxonChrome 29.0.1and infinite values onFF23) and it'll work the same way. That way it won't be coupled with the container's width.
- PS - 您可以将此属性设置为一个非常大的值（
32767pxonChrome 29.0.1和无限值 onFF23），它的工作方式相同。这样它就不会与容器的宽度耦合。
回答by Mordalthunder
Setting the width of a element automatically breaks text inside the element
设置元素的宽度会自动中断元素内的文本
There is also an option to break a word, this can be done with
还有一个选项可以打断一个词，这可以用
word-wrap: break-word;
自动换行：断字；
回答by PH.
I use this css style:
我使用这种 css 样式：
.dont-break-out {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}<div style="width: 500px;" class="dont-break-out">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</div>回答by Vennsoh
I will do something like this.
我会做这样的事情。
<h4>lorem ipsum
<span class="wrap-text">
dolor site amet
</span>
</h4>
.wrap-text{
white-space: pre-line;
}
Not sure why one of the above suggestion uses pre-wrap. I think pre-line will be a better one. It will ignore all spaces and tabs but honour hard returns in source code.
不知道为什么上述建议之一使用预包装。我认为 pre-line 会更好。它将忽略所有空格和制表符，但尊重源代码中的硬返回。
So in your code, for places you want to wrap to the second line, do a hard return.
所以在你的代码中，对于你想要换行到第二行的地方，做一个硬回车。
I like putting a span class is because with this you can make it responsive, only trigger the wrapping at certain viewport sizes. eg: @media (max-width:768px)
我喜欢放置 span 类是因为这样您可以使其具有响应性，仅在某些视口大小时触发包装。例如：@media（最大宽度：768px）
回答by Kami
You need to set the widthof the div element. The elements will then roll over to the new line automatically.
您需要设置widthdiv 元素的 。然后元素将自动滚动到新行。
#box{
width:20px; /* or a suitable width*/
height: 50px;
text-align: center;
position: relative;
margin: 0 auto;
background-color: red;
color: white;
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
Note, however, that the height becomes dependent on the content. If there is allot of content then the element height will also increase.
但是请注意，高度取决于内容。如果有内容分配，则元素高度也会增加。
And alernative approach is to set the word spacing for the parentcontainer to a high amount, eg,
另一种方法是将父容器的字间距设置为较高的值，例如，
.parent {
word-spacing:;
}
That will also force word wrap after each word.
这也将强制每个单词后自动换行。
回答by Steini
Simple, simply put TEST<'br />TEST only through css it is not possible unless you have two subcontainers, one for each "TEST".
简单，只需将 TEST<'br />TEST 仅通过 css 放置是不可能的，除非您有两个子容器，每个“TEST”一个。
