1. 首页
  2. 问答
  3. CSS word-break：break-all不会破坏URL？

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

2014-09-12 68 views
0

我想获得一个长URL放置在侧边栏来打破和包裹在表格单元格宽度的范围内。我已将style="word-break:break-all;"添加到td和span周围的文本和URL，但仍不包装。它只是将单元格推到了它应该在的位置。CSS word-break：break-all不会破坏URL？

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

FYI 该代码是为HTML电子邮件，而不是网络，这就是为什么一切都内联。

这活link

来源

2014-09-12 Terri Swiatek

+1

尝试'自动换行交叉broswer修复：打破字;' – Dan 2014-09-12 21:49:31

+0

我也补充说，现在，但它仍然没有按没有工作。 – 2014-09-12 21:55:34

+1

那么你应该发布你的代码和小提琴，如果可能的话，而不只是一个链接。 – Dan 2014-09-12 22:02:04

回答

2

你的问题是与表：它们不是最合作与CSS样式。

目前您的TD必须设置为显示：block以使分词解决方案发挥作用。你也会想要设置一个宽度，所以它不会影响你的设计太糟糕。您还可以分配给你的跨度：

display: block; 
width: 100px;

还有一些其他的替代方案以及，我贴在下面：

jsFiddle

来源

2014-09-12 22:31:42 jhawes

+0

谢谢jhawes。我非常兴奋的看到我的ipad和Chrome上的这项工作，但当然IE是downer IE 9和8具体。但这个def。帮助我找到了一些额外的跨浏览器支持的答案，我在这里找到了关于CSS的技巧http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ – 2014-09-13 08:53:53

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-技巧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>

来源

2014-09-13 09:09:56

相关问题

 相关问题