Prevent Long URL’s From Breaking Out of Container
Or any long bit of text, really.
.comment-text {
word-wrap: break-word;
}
A more robust browser support, you'll need more (via):
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;The above works in Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+.
Apparently,
overflow-wrapis the newword-wrapas 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!
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.”
the surrounding element must have a specified width or your long url will still break out of the box.
You solved a problem I’ve been having. Awesome!
Thanks agentsuperdave, this tip was extremely useful. For a table, that means you should use “table-layout: fixed” and specify widths for your tds.
Quentin, I love you man, you saved my ass! ;)
Btw. I didn’t declare width, just “table {table-layout: fixed; width: 100%}” and “table a {word-wrap: break-word}”.
I didn’t declare “td” width, just…
Yeah, it works too. In my case I needed a different width for each column.
Great thanks for that, I had been looking for a solution for word-break in FF for like an hour. Cheers
Your robust solution fixed my issue, my URL did not want to break while inside a table styled to be responsive (display:block). Cheers!
fix example from
to
If these options dont’ give you enough control, see this question on SO, especially two of my answers (;-), http://stackoverflow.com/a/6298738/736006 and http://stackoverflow.com/a/6508168/736006.
Thanks man!
I tried using this :
// Given on the top post
-ms-word-break: break-all;
word-break: break-all;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
but was not working.
Until i added
float:left and a width.
Now it is working perfectly fine.
I tried all these solutions and it works perfectly in Safari, Firefox and IE but it does not work in the newest Chrome.
The one I ended up using now is this from the article:
The article says it is supposed to work in Chrome. Does anyone know what the issue might be?