How to prevent long words from breaking my div?

by

Soft hyphen

You can tell browsers where to split long words by inserting soft hyphen (­):

averyvery­longword

may be rendered as

averyverylongword

or

averyvery-
longword

A nice regular expression can ensure you won’t be inserting them unless neccessary:

/([^\s-]{5})([^\s-]{5})/ → $1­$2

Browsers and search engines are smart enough to ignore this character when searching text, and Chrome and Firefox (haven’t tested others) ignore it when copying text to clipboard.

<wbr> element

Another option is to inject <wbr>, a former IE-ism, which is now in HTML5:

averyvery<wbr>longword

Breaks with no hyphen:

averyvery
longword

You can achieve the same with zero-width space character &#8203; (or &#x200B).

FYI there’s also CSS hyphens: auto supported by latest IE, Firefox and Safari (but currently not Chrome):

div.breaking {
  hyphens: auto;
}

However that hyphenation is based on a hyphenation dictionary and it’s not guaranteed to break long words. It can make justified text prettier though.

Retro-whining solution

<table> for layout is bad, but display:table on other elements is fine. It will be as quirky (and stretchy) as old-school tables:

div.breaking {
   display: table-cell;
}

overflow and white-space: pre-wrap answers below are good too.

More Related Contents:

  1. How to get these two divs side-by-side?
  2. How do you easily horizontally center a using CSS? [duplicate]
  3. CSS Floating Divs At Variable Heights [duplicate]
  4. Margin-Top not working for span element?
  5. Footer at bottom of page or content, whichever is lower
  6. Is there a way to make a child DIV’s width wider than the parent DIV using CSS?
  7. How to add a scrollbar to an HTML5 table?
  8. Center a div in CSS [closed]
  9. Font Awesome not working, icons showing as squares
  10. How do I style the HTML5 form validation error messages with CSS?
  11. Transform: translate(-50%, -50%)
  12. Right to Left support for Twitter Bootstrap 3
  13. override css for html5 form validation/required popup
  14. CSS values using HTML5 data attribute [duplicate]
  15. How would you make two s overlap?
  16. How to auto adjust the height according to content in it?
  17. layer on top of PDF
  18. Remove “whitespace” between div element
  19. CSS text ellipsis when using variable width divs
  20. why is my content showing outside the div?
  21. Why use an HTML5 semantic tag instead of div? [duplicate]
  22. How to display and hide a div with CSS?
  23. How to make responsive table [closed]
  24. Why adds extra top margin?
  25. Horizontal masonry layout with flexbox CSS only [duplicate]
  26. Balanced text wrapping in HTML
  27. CSS Floating Divs with different height are aligned with space between them
  28. Horizontal scroll in DIV with many small DIV’s inside (no text)
  29. CSS margin pushing the body element
  30. CSS 100% height layout

Leave a Comment