Code Snippet

Home » Code Snippets » CSS » Prevent Long URL’s From Breaking Out of Container

Prevent Long URL’s From Breaking Out of Container

Or any long bit of text, really.

.comment-text {
   word-wrap: break-word;
}

Subscribe to The Thread

  1. Apparently, overflow-wrap is the new word-wrap as its been removed from the CSS3 spec. I just read about this only a couple of days ago, along with some other interesting proposed typographic properties:

    http://www.impressivewebs.com/new-css3-text-wrap/

    Worth noting: although word-wrap has been removed from spec there is no current browser support for the replacement property!

  2. But before you go rushing into changing all that word-wrap goodness you just added – from the spec: “For legacy reasons, UAs may also accept ‘word-wrap’ as an alternate name for the ‘overflow-wrap’ property.”

  3. agentsuperdave

    the surrounding element must have a specified width or your long url will still break out of the box.

  4. Zach Case

    You solved a problem I’ve been having. Awesome!

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~