How to display a long link in multiple lines via CSS?

anchor, css, html, hyperlink

Solution

There is a CSS Property called "word-break" which you may find useful:

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

Reference: W3Schools word-break information

Problem

These are codes: ``` <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 This long link is displayed at 2nd line. I hope long this link can be displayed in multiple lines. I also hope this long link won't be displayed at outside of red `div` element. This long link should be fully displayed. So this long link should be displayed at 1st line, 2nd line and 3rd line. May it will also be displayed at 4th line. How can this be done via CSS?

Original source