如何通过CSS在多行显示长链接？

Question

这些是代码：

<div>Hello World. <a href="http://www.newyorker.com/arts/events/2014/02/03/140203gofr_GOAT_front">http://www.newyorker.com/arts/events/2014/02/03/140203gofr_GOAT_front</a>.</div>

div {
    background: red;
    width: 200px;
    height:200px;
}

http://jsfiddle.net/gEDx9

此长链接显示在第2行。 我希望这个链接可以多行显示。 我也希望这个长链接不会显示在红色div元素之外。 应该完整显示这个长链接。

所以这个长链接应显示在第1行，第2行和第3行。 也许它也将显示在第4行。

怎么能通过CSS完成？

Answer 1

有一个名为“word-break”的CSS属性，您可能会发现它非常有用：

div {
    background: red;
    width: 200px;
    height: 200px;
    word-break: break-all;
}

参考： W3Schools的分词信息

Answer 2

只需以这种方式添加word-wrap-attribute：

div {
    background: red;
    width: 200px;
    height:200px;
    word-wrap: break-word;
}

查看更新的小提琴： http ： //jsfiddle.net/qhzKF/

Answer 3

如果您确实需要在页面内容中包含URL，请在允许的断点处插入零宽度空间 。 您可以使用参考​ 对他们来说，例如

http://​www​.newyorker​.com/​arts/​events/​2014/​02/​03/​140203gofr​_GOAT​_front

详细信息取决于URL中换行符的约定。 上面的例子符合芝加哥风格手册的规则。 还有其他样式，但没有合理的样式允许任意中断URL（这是使用word-wrap: break-word ）。

因此，在内容中正确处理URL有点棘手，但它可以自动化。 但是，最好不要在内容中使用URL，除非页面内容是关于 URL的。 通常，您应该使用带有描述性链接文本的链接，将URL“隐藏”到href属性中。

Answer 4

将此css应用于您的A元素

a { word-wrap:break-word; }

Answer 5

你可以使用word-wrap:break-word

CSS：

div {
    background: red;
    width: 200px;
    height:200px;
    word-wrap:break-word;
}

http://jsfiddle.net/gEDx9/3/