How to break long strings in HTML?

Question

I read (and tried):

Break long word with CSS

And I now have:

<span style="font-size: xx-small; white-space: -moz-pre-wrap !important; white-space: -pre-wrap;white-space:
-o-pre-wrap;white-space: pre-wrap; word-wrap: break-word;word-break: break-all;white-space:normal;width: 385px;">

but still the large strings will NOT auto wrap in FF or IE but it DOES in Chrome...

(example: http://ed.je/2L6 or http://jsfiddle.net/92kSU/ )

What kinds of strings would you want to break and by which principles? For example, do you want norma l words t o be br oken at a ribra ry points? (Many “solutions” offered to abstract questions like this do such things.) — Jukka K. Korpela, Mar 27 '14 at 18:50

score 6 · Accepted Answer · answered Mar 27 '14 at 17:40

6

In this case it looks like you need to set word-break: break-all at a higher level. If I open your example page in Firefox and use Firebug to set style word-break: break-all on .entry-content then the large strings wrap.

Edit:

Alternatively, you could instead set the display style of you spans as inline-block.

answered Mar 27 '14 at 17:40

dgvid

26,293
5
40
57

Didn't see your edit before adding my answer. Upvote for you. – Derek Story Mar 27 '14 at 17:46
tnx. slowly updating new style.css. probably best to set it at style.css level and not post level. – edelwater Mar 27 '14 at 17:47

score 1 · Answer 2 · edited Mar 27 '14 at 17:55

The following snippet is a catch-all for word-wrapping:

.class_name {
     -ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

     -webkit-hyphens: auto;
     -moz-hyphens: auto;
     -ms-hyphens: auto;
     hyphens: auto;
}

word-break: break-all will work except for IE8 and Firefox, so you need the ms-word-break prefixed line included as well. As usual, IE8 requires that its prefixed line be added first. This doesn't solve it for Firefox, however.

In FF, you need to use a new item called hyphenations, which is supported except for Chrome (but it's okay, because Chrome will use the basic word-break: break all) in this lengthy list: -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;.

Hyphenation will insert hyphens at the correct location for word-breaks, which is a better solution than just splitting a word in two.

More information on why this is a catch all.

Downvoter please comment; this is in fact a catch-all for word-wrapping and when applied to the OP's code will break the long strings. — TylerH, Mar 27 '14 at 17:45
tnx would also work. gave you an upvote to match to whoever downvoted — edelwater, Mar 27 '14 at 17:48

How to break long strings in HTML?

2 Answers2