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?

Answer 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

Answer 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/

Answer 3

If you really need to include a URL in page content , insert zero-width space s at permissible break points. You can use the reference ​ for them, eg

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

The details depend on the conventions on line breaks in URLs. The above example complies to the rules of The Chicago Manual of Style . There are other styles, too, but no reasonable style allows arbitrary breaking of URLs (which is what you would get by using word-wrap: break-word ).

The proper handling of URLs in content is thus somewhat tricky, but it can be automated. However, it is best avoided by not using URLs in content unless the page content is about URLs. Normally, you should use links with descriptive link texts, “hiding” URLs into href attributes.

Answer 4

将此css应用于您的A元素

a { word-wrap:break-word; }

Answer 5

You can use the word-wrap:break-word

CSS:

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

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