Handling Long Words and URLs

0
0

There are times when a really long string of text can overflow the container of a layout.

For example:

URL’s don’t typically have spaces in them, so they are often culprits.

Here’s a big snippet with all the CSS players involved:

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

That would fix the issue for us:

Here’s the scoop:

  • overflow-wrap: break-word; makes sure the long string will wrap and not bust out of the container. You might as well use word-wrap as well because as the spec says, they are literally just alternate names for each other. Some browsers support one and not the other. Firefox (tested v43) only supports word-wrap. Blink (tested Chrome v45) will take either one.
  • With overflow-wrap in use all by itself, words will break kinda anywhere they need to. If there is an “acceptable break” character (like a literal dash, for instance), it will break there, otherwise it just does what it needs to do.
  • You might as well use hyphens as well, because then it will try to tastefully add a hyphen where it breaks if the browser supports it (Blink doesn’t at time of writing, Firefox does).
  • word-break: break-all; is to tell the browser that it’s OK to break the word wherever it needs to. Even though it kinda does that anyway so I’m not sure in what cases it’s 100% necessary.

If you want be more manual with hyphens, you can suggest them in your markup. See more on the MDN page.

#Browser support

#For word-break:

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

#Desktop

Chrome Opera Firefox IE Edge Safari
44 31 15 5.5 12 9

#Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
9.0-9.2 37 No 62 64 57

#For hypens:

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

#Desktop

Chrome Opera Firefox IE Edge Safari
68 52 6* 10* 12* 5.1*

#Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
4.2-4.3* No No 62 64 57

#For overflow-wrap:

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

#Desktop

Chrome Opera Firefox IE Edge Safari
23 12.1 49 11 18 6.1

#Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
7.0-7.1 37 all 4.4 64 57

#For text-overflow:

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

#Desktop

Chrome Opera Firefox IE Edge Safari
4 9* 7 6 12 3.1

#Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
3.2 10* all 2.1 64 57

#Preventing Overflow with Ellipsis

Another approach to consider is truncating the text altogether and adding ellipses where the string of text hits the container:

.ellipses {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

This nice thing about using text-overflow is that it is supported universally.

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.