Question

我试图在边栏中放置一个长URL来打破并包裹在表格单元格宽度的范围内。我已将style="word-break:break-all;"添加到td和文本和网址周围的span，但仍然没有换行。它只是将细胞推到应有的位置。

还有其他方法可以解决这个问题吗？

FYI 代码用于HTML电子邮件，而不是网络，这就是为什么所有内容都是内联的。

这是现场link

Answer 1

你的问题在于表格：它们在使用CSS的样式方面不是最合作的。

目前您的TD必须设置为显示：阻止破解词解决方案才能运行。您还需要设置宽度，这样就不会影响您的设计。您也可以将此分配给您的范围：

display: block;
width: 100px;

还有一些其他选择，我在下面发布：

jsFiddle

Answer 2

我在这里设置了一个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-tricks here

的交叉修复

所以最终工作的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>

CSS word-break：break-all不会破坏URL？

2 个答案: