Html 如何在 DIV 中的长单词中强制换行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3058866/
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
How to force a line break in a long word in a DIV?
提问by Nathan Osman
Okay, this is really confusing me. I have some content inside of a div like so:
好吧，这真的让我很困惑。我在 div 中有一些内容，如下所示：
<div style="background-color: green; width: 200px; height: 300px;">
Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.
</div>
However, the content overflows the DIV (as expected) because the 'word' is too long.
但是，内容溢出 DIV（正如预期的那样），因为“单词”太长。
How can I force the browser to 'break' the word where necessary to fit all of the content inside?
如何强制浏览器在必要时“打破”这个词以适应其中的所有内容？
回答by Chi
It even works in IE6, which is a pleasant surprise.
它甚至可以在 IE6 中运行，这是一个惊喜。
word-wrap: break-wordhas been replaced with overflow-wrap: break-word;which works in every modern browser. IE, being a dead browser, will forever rely on the deprecated and non-standard word-wrapinstead.
word-wrap: break-word已被替换为overflow-wrap: break-word;适用于所有现代浏览器的 。IE 作为一个死浏览器，将永远依赖于已弃用和非标准的浏览器word-wrap。
Existing uses of word-wraptoday still work as it is an alias for overflow-wrapper the specification.
word-wrap今天的现有用途仍然有效，因为它是overflow-wrap每个规范的别名。
回答by rahul
I am not sure about the browser compatibility
我不确定浏览器兼容性
word-break: break-all;
Also you can use the <wbr>tag
你也可以使用<wbr>标签
<wbr>(word break) means: "The browser may insert a line break here, if it wishes." It the browser does not think a line break necessary nothing happens.
<wbr>(word break) 的意思是：“如果愿意，浏览器可以在此处插入换行符。” 如果浏览器认为不需要换行，则不会发生任何事情。
回答by Milche Patern
This could be added to the accepted answer for a 'cross-browser' solution.
这可以添加到“跨浏览器”解决方案的公认答案中。
Sources:
资料来源：
- http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
- http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
- http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
- http://css-tricks.com/snippets/css/prevent-long-urls-from-break-out-of-container/
.your_element{
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
回答by Simon East
I was just Googling the same issue, and posted my final solution HERE. It's relevant to this question too.
我只是在谷歌上搜索同样的问题，并在此处发布了我的最终解决方案。它也与这个问题有关。
You can do this easily with a div by giving it the style word-wrap: break-word(and you may need to set its width, too).
您可以通过为 div 指定样式来轻松完成此操作word-wrap: break-word（您可能还需要设置其宽度）。
div {
word-wrap: break-word; /* All browsers since IE 5.5+ */
overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
width: 100%;
}
However, for tables, you also need to apply: table-layout: fixed. This means the columns widths are no longer fluid, but are defined based on the widths of the columns in the first row only (or via specified widths). Read more here.
但是，对于 tables，您还需要申请：table-layout: fixed。这意味着列宽不再是可变的，而是仅根据第一行中的列宽（或通过指定的宽度）定义的。在这里阅读更多。
Sample code:
示例代码：
table {
table-layout: fixed;
width: 100%;
}
table td {
word-wrap: break-word; /* All browsers since IE 5.5+ */
overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
}
回答by davidcondrey
​is the HTML entity for a unicode character called the zero-width space (ZWSP) which is an invisible character which specifies a line-break opportunity. Similarly the hyphen's purpose is to specify a line-break opportunity within a word boundary.
​是称为零宽度空格 (ZWSP) 的 unicode 字符的 HTML 实体，它是一个不可见的字符，用于指定换行机会。类似地，连字符的目的是指定单词边界内的换行机会。
回答by Andrew
Found that using the following worked across most major browsers (Chrome, IE, Safari iOS/OSX) except Firefox (v50.0.2) when using flexbox and relying on width: auto.
发现在使用 flexbox 和依赖width: auto.
.your_element {
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
}
Note: you may need to add browser vendor prefixes if you are not using an autoprefixer.
注意：如果您不使用自动前缀，则可能需要添加浏览器供应商前缀。
Another thing to watch out for is text using for spacing can cause line breaks mid-word.
另一件需要注意的事情是 用于间距的文本会导致单词中间换行。
回答by Babiker
CSSword-wrap:break-word;, tested in FireFox 3.6.3
CSSword-wrap:break-word;，在 FireFox 3.6.3 中测试
回答by Thadeu Esteves Jr.
I solved my problem with code below.
我用下面的代码解决了我的问题。
display: table-caption;
回答by Vineet Kumar Singh
Remove white-space: nowrap, if there is any.
删除white-space: nowrap，如果有的话。
Implement:
实施：
white-space: inherit;
word-break: break-word;
回答by Tính Ng? Quang
Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
空白由浏览器保留。文本将在必要时换行，并在换行符处
.pre-wrap {
white-space: pre-wrap;
word-break: break-word;
}
DEMO
演示
td {
word-break: break-word;
white-space: pre-wrap;
-moz-white-space: pre-wrap;
}
table {
width: 100px;
border: 1px solid black;
display: block;
}<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>