Html word-wrap break-word 在这个例子中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10743763/
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
word-wrap break-word does not work in this example
提问by b10hazard
I cannot get word-wrap to work with this example...
我无法使用自动换行来处理此示例...
<html>
<head></head>
<body>
<table style="table-layout:fixed;">
<tr>
<td style="word-wrap: break-word; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td>
</tr>
</table>
</body></html>
I remembered reading that a layout had to be specified (which I did), but beyond that I'm not sure what I have to do to get this to work. I really would like this to work in Firefox. Thanks.
我记得读过必须指定布局（我做了），但除此之外我不确定我必须做什么才能让它工作。我真的希望它在 Firefox 中工作。谢谢。
EDIT: Failed in Chrome 19 and Firefox 12, it works in IE8. I tried doctype strict and transitional, neither worked.
编辑：在 Chrome 19 和 Firefox 12 中失败，它适用于 IE8。我尝试了 doctype strict 和 transitional，都没有奏效。
回答by Stencil
Mozilla Firefoxsolution
Mozilla Firefox解决方案
Add:
添加：
display: inline-block;
to the style of your td.
到你的风格td。
Webkit based browsers (Google Chrome, Safari, ...) solution
基于 Webkit 的浏览器（Google Chrome、Safari等）解决方案
Add:
添加：
display: inline-block;
word-break: break-word;
to the style of your td.
到你的风格td。
Note:Mind that, as for now, break-wordis not part of the standard specification for webkit; therefore, you might be interested in employing the break-allinstead. This alternative value provides a undoubtedly drastic solution; however, it conforms to the standard.
注意：请注意，就目前而言，break-word它不是 webkit 标准规范的一部分；因此，您可能有兴趣使用break-all代替。这个替代值无疑提供了一个激烈的解决方案；但是，它符合标准。
Operasolution
歌剧解决方案
Add:
添加：
display: inline-block;
word-break: break-word;
to the style of your td.
到你的风格td。
The previous paragraph applies to Opera in a similar way.
上一段以类似的方式适用于 Opera。
回答by Sunny S.M
Use this code (taken from css-tricks) that will work on all browser
使用此代码（取自 css-tricks）将适用于所有浏览器
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;
回答by D.Dimitrioglo
This combination of properties helped for me:
这种属性组合对我有帮助：
display: inline-block;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: normal;
line-break: strict;
hyphens: none;
-webkit-hyphens: none;
-moz-hyphens: none;
回答by Farsheed
Work-Break has nothing to do with inline-block.
工作休息与inline-block.
Make sure you specify widthand notice if there are any overriding attributes in parent nodes. Make sure there is not white-space: nowrap.
确保您指定width并注意父节点中是否有任何覆盖属性。确保没有white-space: nowrap.
See thiscodepen.
请参阅此代码笔。
<html>
<head>
</head>
<body>
<style scoped>
.parent {
width: 100vw;
}
p {
border: 1px dashed black;
padding: 1em;
font-size: calc(0.6vw + 0.6em);
direction: ltr;
width: 30vw;
margin:auto;
text-align:justify;
word-break: break-word;
white-space: pre-line;
overflow-wrap: break-word;
-ms-word-break: break-word;
word-break: break-word;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
}
</style>
<div class="parent">
<p>
Note: Mind that, as for now, break-word is not part of the standard specification for webkit; therefore, you might be interested in employing the break-all instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to
the standard.
</p>
</div>
</body>
</html>回答by shayuna
to get the smart break (break-word) work well on different browsers, what worked for me was the following set of rules:
为了让智能中断（break-word）在不同的浏览器上运行良好，对我有用的是以下规则集：
#elm {
word-break:break-word; /* webkit/blink browsers */
word-wrap:break-word; /* ie */
}
-moz-document url-prefix() {/* catch ff */
#elm {
word-break: break-all; /* in ff- with no break-word we'll settle for break-all */
}
}
回答by shayuna
This code is also working:
此代码也有效：
<html>
<head></head>
<body>
<table style="table-layout:fixed;">
<tr>
<td style="word-break: break-all; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td>
</tr>
</table>
</body></html>回答by Balaji
word-wrapproperty work's with display:inline-block:
word-wrap物业工作与display:inline-block：
display: inline-block;
word-wrap: break-word;
width: 100px;
