如何通过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的分词信息