我正在尝试将一个长 URL 放置在侧边栏中，以便在表格单元格宽度的范围内打破和包装。我已经添加style="word-break:break-all;"到td和span周围的文本和 URL 但仍然没有换行。它只是将单元格推到它应该在的位置下方。
还有其他方法可以解决这个问题吗？
仅供参考，该代码用于 HTML 电子邮件而不是网络，这就是为什么所有内容都是内联的。
这里是直播链接
问问题
2628 次
2 回答
2
您的问题在于表格：它们在使用 CSS 样式方面不是最合作的。
目前，您的 TD 必须设置为 display: block 才能使断词解决方案起作用。您还需要设置宽度，以免对您的设计造成太大影响。您还可以将其分配给您的跨度：
display: block;
width: 100px;
还有一些其他的选择，我在下面发布：
于 2014-09-12T22:31:42.820 回答
0
我在这里设置了一个 JSFiddle 来显示动作jsfiddle中的修复
jhawes 指出我的 td 需要指定宽度是正确的。我是这样做的（一切都需要内联，因为这是一封电子邮件）
<td width="160" style="width:160px;-word-break:break-word;word-break:break:all;"></td>
我还需要添加 display:block; 正如建议的那样（我不需要额外的包含 div 元素）
<td width="160" style="width:160px;display:block;-word-break:break-word;word-break:break:all;" </td>
这在大多数现代浏览器中效果很好，但在 IE9 和 IE8 中仍然无法使用。我在这里找到了关于 CSS 技巧的跨浏览器修复
所以最终的工作 td 看起来像这样
<td width="160" style="width:160px;display:block;-ms-word-break: break-all;
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;""</td>
于 2014-09-13T09:09:56.687 回答