Wrapping long text in CSS [duplicate]

Answer 1

I use the combination

word-wrap: break-word;
overflow: hidden;

to deal with this. The word-wrap setting will allow the word to be wrapped despite its length in browsers which support that property, while the overflow setting will cause it to be cut off at the end of the available space in browsers which don't recognize word-wrap. That's about as graceful of degradation as you're likely to get without going to javascript.

Answer 2

The suggested tags work to break really long words (or URLs) but you'll get mixed results from browser to browser trying to flow text in narrow divs. For example a 200px div:

<div style="font-size:12px;font-family:monospace;width:200px;word-break:break-all;word-wrap:break-word;">1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890</div>

In Chrome the numbers break, in Firefox they do not--you get two columns of numbers! It seems Firefox doesn't consider how much space is available on the previous line of a "long" word--it doesn't break at every opportunity. If this behavior is ever corrected, I hope Firefox also considers how this affects text justification.

The "shy" tags help Firefox but you still get "ragged" text. I haven't done extensive tests but it appears the shy tags create unpredictable results (divs lose their style) when used in short words (less than 8 characters) in Firefox. I personally prefer Chrome's more aggressive breaks!

Answer 3

Unfortunately, unless you're happy with supporting only specific browsers (IE7/Win, Safari, Firefox 3.5), there's no pure CSS solution to your problem.

word-wrap: break-word; works, but only in IE.

If you're able to alter the text, either server-side (PHP, ASP) or possibly client-side (Javascript), you could write a small function that inserts 'shy hyphens' (­) into your text. That way, text can be broken up at every instance of the hyphen, and shy hyphens will not be displayed if the word is not broken up.

Edit, an example:

bla­bla­bla­bla­bla­bla­bla­bla­bla­ (etc)

will display as follows in your browser:

blablabla-
blablabla-
blabla

Answer 4

simple css. Try this: Put your text in < pre>...< /pre>

css rule

pre {
   overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
   white-space: pre-wrap; /* css-3 */
   white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
   white-space: -pre-wrap; /* Opera 4-6 */
   white-space: -o-pre-wrap; /* Opera 7 */
   /* width: 99%; */
   word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Answer 5

In extension to the answer of Duroth, you can use the following php code to insert the shy-hyphens

$longest_length = 15;

$string_with_long_word = 'short lonngerrrrr lonnnnnnnggeeeeeeeeeeeeeeeeeessssssssssssssssstttttttttttttt and another looooooooooooonnnnnnnnngwwooooooooororoooorrrrrd';
$string = preg_replace_callback("/[a-z0-9]{{$longest_length},}/", 'putShyHyphen', $string_with_long_word);

function putShyHyphen($matches) {
 $string = $matches[0];
 $newstring = '';
 for ($i=0; $i<strlen($string); $i++) {
  $newstring .= $string[$i] . '&shy;';
 }

 return $newstring;
}
echo $string_with_long_word . '<hr />';
echo $string;

Answer 6

As word-wrap: break-word does not work well when the width is not fixed (and even less in <table>), Stack Exchange adds some invisible Unicode markers, which browsers use to find possible positions for line breaks. But: those invisible markers are still there when the visitor copies the text, which might be bad. More details on Meta, in https://meta.stackexchange.com/questions/170970/occasionally-the-unicode-character-sequence-u200c-u200b-zwnj-zwsp-is-insert/.

Instead of Unicode magic, inserting <span style="display: inline-block"></span> every few characters seems not to have a bad effect when copying the resulting text. This works for me in Chrome 25, Firefox 19, Safari 6, Internet Explorer 9 (in Windows 7 on Parallels on a Mac; simulating IE8 and IE7 works too), stock browser and Chrome on Android 4.1, and Safari on iOS 6.1.2, and is probably also supported in Opera. See this JS Bin example.

Some day, <wbr> will be the solution, but not today: though IE7 supported it, IE8 and IE9 don't.