html - word-wrap：断词；不破坏标签

Question

我的 word-wrap break-word 属性有问题，它应该会破坏代码标记，当它到达边界时

<div>class="link alert clearfix"</div>

但它并没有破坏这个词，而是跳到下一行，在“投票”div旁边

这是问题：

http://meetthemes.com/post/?post=Mooncraft+-+Themeforest+Premium+Theme

向下滚动到第三个下载链接，就是跳下来的那个

Answer 1

如果你将它设置为display: inline-block并给它一个max-width，它会为你打破这个词。您还需要删除white-space: nowrapCSS 中的 code 元素，或code.link通过添加white-space: normal.

Answer 2

约翰的建议根本不起作用，为了工作，您还必须使用这篇文章中授权的属性：

所以使用下面的示例代码：

<code style="display: inline-block;white-space: normal;max-width:100%; word-break:break-all; word-wrap:break-word;">anyyyyyyyylonnnnnngggggggggstringggggggggwillllbetrunnncateeeeeddddddd</code>

您可以以整数 PX、EM 或百分比设置任何最大宽度，也可以不设置最大宽度，因为它不是强制性的