8

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?

1
  • a {word-wrap: break-word;}
    – Carl0s1z
    Jan 30, 2014 at 18:13

5 Answers 5

16

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

5
  • Quick note, you might want to avoid referencing W3Schools as it's known for misinformation: w3fools.com
    – potench
    Jan 30, 2014 at 18:25
  • Matt's answer can fix the issue. But I agree W3Schools is bad. Jan 31, 2014 at 13:18
  • Good to know... I've used them pretty successfully as a reference a lot of times and didn't know that. I have noticed some of their stuff is outdated sometimes, though.
    – Matt
    Mar 12, 2014 at 18:01
  • as of this comment w3fools has re-endorsed w3schools.
    – Matt
    Nov 2, 2017 at 15:17
  • 1
    "Today, W3Schools has largely resolved these issues and addressed the majority of the undersigned developers' concerns. For many beginners, W3Schools has structured tutorials and playgrounds that offer a decent learning experience. " Jun 3, 2021 at 7:07
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/

1
  • This solution doesn't fix the issue. Link isn't displayed from 1st line right following texts "Hello World.". Matt's solution can fix the issue. Jan 31, 2014 at 13:11
0

If you really need to include a URL in page content, insert zero-width spaces at permissible break points. You can use the reference &#x200b; for them, e.g.

http://&#x200b;www&#x200b;.newyorker&#x200b;.com/&#x200b;arts/&#x200b;events/&#x200b;2014/&#x200b;02/&#x200b;03/&#x200b;140203gofr&#x200b;_GOAT&#x200b;_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.

-1

apply this css to your A element

a { word-wrap:break-word; }
0
-1

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/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.