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

Question

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?

Solution 1

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

Solution 2

Just add the word-wrap-attribute this way:

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

See updated fiddle: http://jsfiddle.net/qhzKF/