How to prevent long words from breaking my div

Question

Ever since switching from TABLE-layout to DIV-layout  one common problem remains   PROBLEM  you fill your DIV with dynamic text and inevitably there is a super-long word that extends over the edge of your div column and makes your site look unprofessional   RETRO-WHINING  This never happened with table layouts  A table cell will always nicely expand to the width of the longest word    SEVERITY  I see this problem on even the most major sites  especially on German sites where even common words such as  speed limit  are very long   Geschwindigkeitsbegrenzung      Does anyone have a workable solution to this

User · Answer

This is a complex issue  as we know  and not supported in any common way between browsers  Most browsers don t support this feature natively at all   In some work done with HTML emails  where user content was being used  but script is not available  and even CSS is not supported very well  the following bit of CSS in a wrapper around your unspaced content block should at least help somewhat    word-break        The following styles prevent unbroken strings from breaking the layout      width  300px     set to whatever width you need      overflow  auto    white-space  -moz-pre-wrap     Mozilla      white-space  -hp-pre-wrap     HP printers      white-space  -o-pre-wrap     Opera 7      white-space  -pre-wrap     Opera 4-6      white-space  pre-wrap     CSS 2 1      white-space  pre-line     CSS 3  and 2 1 as well  actually       word-wrap  break-word     IE      -moz-binding  url  xbl xml wordwrap       Firefox  using XBL         In the case of Mozilla-based browsers  the XBL file mentioned above contains    lt  xml version  1 0  encoding  utf-8   gt   lt bindings xmlns  http   www mozilla org xbl             xmlns html  http   www w3 org 1999 xhtml  gt     lt  --   More information on XBL    http   developer mozilla org en docs XBL XBL 1 0 Reference    Example of implementing the CSS  word-wrap  feature    http   blog stchur com 2007 02 22 emulating-css-word-wrap-for-mozillafirefox    -- gt     lt binding id  wordwrap  applyauthorstyles  false  gt       lt implementation gt         lt constructor gt             lt   CDATA          var elem   this           doWrap            elem addEventListener  overflow   doWrap  false            function doWrap               var walker   document createTreeWalker elem  NodeFilter SHOW TEXT  null  false             while  walker nextNode                  var node   walker currentNode              node nodeValue   node nodeValue split     join String fromCharCode  8203                                        gt         lt  constructor gt       lt  implementation gt     lt  binding gt   lt  bindings gt    Unfortunately  Opera 8  don t seem to like any of the above solutions  so JavaScript will have to be the solution for those browsers  like Mozilla Firefox   Another cross-browser solution  JavaScript  that includes the later editions of Opera would be to use Hedger Wang s script found here  http   www hedgerwow com 360 dhtml css-word-break html  Other useful links thoughts   Incoherent Babble    Blog Archive    Emulating CSS word-wrap for Mozilla Firefox http   blog stchur com 2007 02 22 emulating-css-word-wrap-for-mozillafirefox    OU  No word wrap in Opera  displays fine in IE http   list opera com pipermail opera-users 2004-November 024467 html http   list opera com pipermail opera-users 2004-November 024468 html

User · Answer

I ve written a function that works great where it inserts  amp shy  x letters into the word for good line breaking  All answers here did not support all browsers and devices but this works well using PHP          Add line-break to text x characters in     param  string   text               param  integer  characters in      return string                      function line break text  text   characters in   10          split   explode       text        if     empty  split              foreach   split as  key   gt   var                 if   strlen  var   gt   characters in                       split  key    substr replace  var    amp shy     characters in  0                                         return implode       split

User · Answer

Yeah  if it is possible  setting an absolute width and setting overflow   auto works well

User · Answer

p       overflow-wrap  break-word       -moz-document url-prefix          p           white-space  -moz-pre-wrap          word-wrap  break-word

User · Answer

after all the word wraps and breaks  preserve your overflow and see if this solves your issue  simply change your div s display to  display  inline

User · Answer

A simple function  requires underscore js  -- based off of  porneL answer      String prototype shyBreakString   function maxLength            var shystring                 each this split       function word               shystring push   chop word  maxLength  join   amp shy                          return shystring join

User · Answer

This is a complex issue  as we know  and not supported in any common way between browsers  Most browsers don t support this feature natively at all   In some work done with HTML emails  where user content was being used  but script is not available  and even CSS is not supported very well  the following bit of CSS in a wrapper around your unspaced content block should at least help somewhat    word-break        The following styles prevent unbroken strings from breaking the layout      width  300px     set to whatever width you need      overflow  auto    white-space  -moz-pre-wrap     Mozilla      white-space  -hp-pre-wrap     HP printers      white-space  -o-pre-wrap     Opera 7      white-space  -pre-wrap     Opera 4-6      white-space  pre-wrap     CSS 2 1      white-space  pre-line     CSS 3  and 2 1 as well  actually       word-wrap  break-word     IE      -moz-binding  url  xbl xml wordwrap       Firefox  using XBL         In the case of Mozilla-based browsers  the XBL file mentioned above contains    lt  xml version  1 0  encoding  utf-8   gt   lt bindings xmlns  http   www mozilla org xbl             xmlns html  http   www w3 org 1999 xhtml  gt     lt  --   More information on XBL    http   developer mozilla org en docs XBL XBL 1 0 Reference    Example of implementing the CSS  word-wrap  feature    http   blog stchur com 2007 02 22 emulating-css-word-wrap-for-mozillafirefox    -- gt     lt binding id  wordwrap  applyauthorstyles  false  gt       lt implementation gt         lt constructor gt             lt   CDATA          var elem   this           doWrap            elem addEventListener  overflow   doWrap  false            function doWrap               var walker   document createTreeWalker elem  NodeFilter SHOW TEXT  null  false             while  walker nextNode                  var node   walker currentNode              node nodeValue   node nodeValue split     join String fromCharCode  8203                                        gt         lt  constructor gt       lt  implementation gt     lt  binding gt   lt  bindings gt    Unfortunately  Opera 8  don t seem to like any of the above solutions  so JavaScript will have to be the solution for those browsers  like Mozilla Firefox   Another cross-browser solution  JavaScript  that includes the later editions of Opera would be to use Hedger Wang s script found here  http   www hedgerwow com 360 dhtml css-word-break html  Other useful links thoughts   Incoherent Babble    Blog Archive    Emulating CSS word-wrap for Mozilla Firefox http   blog stchur com 2007 02 22 emulating-css-word-wrap-for-mozillafirefox    OU  No word wrap in Opera  displays fine in IE http   list opera com pipermail opera-users 2004-November 024467 html http   list opera com pipermail opera-users 2004-November 024468 html

User · Answer

For compatibility with IE 8  use   -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    See it here http   css-tricks com snippets css prevent-long-urls-from-breaking-out-of-container   All I had to do was apply this to the style of the div container with a set width

User · Answer

word-wrap  break-word  works in Firefox 3 5 http   hacks mozilla org 2009 06 word-wrap

User · Answer

Just checked IE 7  Firefox 3 6 8 Mac  Firefox 3 6 8 Windows  and Safari   word-wrap  break-word    works for long links inside of a div with a set width and no overflow declared in the css    consumeralerts leftcol      float left      width  250px      margin-bottom 10px      word-wrap  break-word      I don t see any incompatibility issues

User · Answer

I had to do the following because  if the properties were not declared in the correct order  it would randomly break words at the wrong place and without adding a hyphen         -moz-white-space  pre-wrap  white-space  pre-wrap              hyphens  auto      -ms-word-break  break-all      -ms-word-wrap  break-all      -webkit-word-break  break-word      -webkit-word-wrap  break-word  word-break  break-word  word-wrap  break-word      -webkit-hyphens  auto      -moz-hyphens  auto      -ms-hyphens  auto  hyphens  auto    Originally posted by Enigmo  https   stackoverflow com a 14191114

User · Answer

Need to set  table-layout  fixed    for word-wrap to work

User · Answer

For me on a div without fixed size and with dynamic content it worked using   display table  word-break break-all

User · Answer

Soft hyphen You can tell browsers where to split long words by inserting soft hyphen   amp shy    averyvery amp shy 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 amp shy  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   lt wbr gt  element Another option is to inject  lt wbr gt   a former IE-ism  which is now in HTML5  averyvery lt wbr gt longword  Breaks with no hyphen   averyvery longword  You can achieve the same with zero-width space character  amp  8203   or  amp  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  lt table gt  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

User · Answer

Soft hyphen You can tell browsers where to split long words by inserting soft hyphen   amp shy    averyvery amp shy 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 amp shy  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   lt wbr gt  element Another option is to inject  lt wbr gt   a former IE-ism  which is now in HTML5  averyvery lt wbr gt longword  Breaks with no hyphen   averyvery longword  You can achieve the same with zero-width space character  amp  8203   or  amp  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  lt table gt  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

User · Answer

A simple function  requires underscore js  -- based off of  porneL answer      String prototype shyBreakString   function maxLength            var shystring                 each this split       function word               shystring push   chop word  maxLength  join   amp shy                          return shystring join

User · Answer

HYPHENATOR is the right answer  given above   The real problem behind your question is that web browsers are still  in 2008  extremely primitive that they do not have a hyphenation-feature  Look  we are still on the early beginnings of computer usage - we have to be patient  As long as designers rule the web world we will have a hard time waiting for some real useful new features    UPDATE   As of December  2011  we now have another option  with the emerging support of these tags in FF and Safari   p       -webkit-hyphens  auto      -moz-hyphens  auto      hyphens  auto      I ve done some basic testing and it seems to work on a recent version of Mobile Safari and Safari 5 1 1   Compatibility table  https   developer mozilla org en CSS hyphens AutoCompatibilityTable

User · Answer

I just found out about hyphenator from this question  That might solve the problem

User · Answer

CSS Cross Browser Word Wrap   word wrap       white-space  pre-wrap     css-3        white-space  -moz-pre-wrap     Mozilla  since 1999        white-space  -pre-wrap     Opera 4-6        white-space  -o-pre-wrap     Opera 7        word-wrap  break-word     Internet Explorer 5 5

User · Answer

The solution I usually use for this problem is to set 2 different css rules for IE and other browsers   word-wrap  break-word    woks perfect in IE  but word-wrap is not a standard CSS property  It s a Microsoft specific property and doesn t work in Firefox   For Firefox  the best thing to do using only CSS is to set the rule  overflow  hidden    for the element that contains the text you want to wrap  It doesn t wrap the text  but hide the part of text that go over the limit of the container  It can be a nice solution if is not essential for you to display all the text  i e  if the text is inside an  lt a gt  tag

User · Answer

I ve written a function that works great where it inserts  amp shy  x letters into the word for good line breaking  All answers here did not support all browsers and devices but this works well using PHP          Add line-break to text x characters in     param  string   text               param  integer  characters in      return string                      function line break text  text   characters in   10          split   explode       text        if     empty  split              foreach   split as  key   gt   var                 if   strlen  var   gt   characters in                       split  key    substr replace  var    amp shy     characters in  0                                         return implode       split

User · Answer

Do you mean that  in browsers that support it  word-wrap  break-word does not work    If included in the body definition of the stylesheet  it should works throughout the entire document   If overflow is not a good solution  only a custom javascript could artificially break up long word   Note  there is also this  lt wbr gt  Word Break tag  This gives the browser a spot where it can split the line up  Unfortunately  the  lt wbr gt  tag doesn t work in all browsers  only Firefox and Internet Explorer  and Opera with a CSS trick

User · Answer

CSS Cross Browser Word Wrap   word wrap       white-space  pre-wrap     css-3        white-space  -moz-pre-wrap     Mozilla  since 1999        white-space  -pre-wrap     Opera 4-6        white-space  -o-pre-wrap     Opera 7        word-wrap  break-word     Internet Explorer 5 5

User · Answer

Use the style word-break break-all   I know it works on tables

User · Answer

I just found out about hyphenator from this question  That might solve the problem

User · Answer

After much fighting  this is what worked for me    pre       font-weight  500      font-family  Courier New  monospace      white-space  pre-wrap      word-wrap  break-word      word-break  break-all      -webkit-hyphens  auto      -moz-hyphens  auto      hyphens  auto      Works in the latest versions of Chrome  Firefox and Opera   Note that I excluded many of the white-space properties the others suggested -- that actually broke the pre indentation for me

User · Answer

HYPHENATOR is the right answer  given above   The real problem behind your question is that web browsers are still  in 2008  extremely primitive that they do not have a hyphenation-feature  Look  we are still on the early beginnings of computer usage - we have to be patient  As long as designers rule the web world we will have a hard time waiting for some real useful new features    UPDATE   As of December  2011  we now have another option  with the emerging support of these tags in FF and Safari   p       -webkit-hyphens  auto      -moz-hyphens  auto      hyphens  auto      I ve done some basic testing and it seems to work on a recent version of Mobile Safari and Safari 5 1 1   Compatibility table  https   developer mozilla org en CSS hyphens AutoCompatibilityTable

User · Answer

I just found out about hyphenator from this question  That might solve the problem

User · Answer

Use this  word-wrap  break-word  overflow-wrap  break-word  word-break  break-all

User · Answer

Do you mean that  in browsers that support it  word-wrap  break-word does not work    If included in the body definition of the stylesheet  it should works throughout the entire document   If overflow is not a good solution  only a custom javascript could artificially break up long word   Note  there is also this  lt wbr gt  Word Break tag  This gives the browser a spot where it can split the line up  Unfortunately  the  lt wbr gt  tag doesn t work in all browsers  only Firefox and Internet Explorer  and Opera with a CSS trick

User · Answer

Need to set  table-layout  fixed    for word-wrap to work

User · Answer

HYPHENATOR is the right answer  given above   The real problem behind your question is that web browsers are still  in 2008  extremely primitive that they do not have a hyphenation-feature  Look  we are still on the early beginnings of computer usage - we have to be patient  As long as designers rule the web world we will have a hard time waiting for some real useful new features    UPDATE   As of December  2011  we now have another option  with the emerging support of these tags in FF and Safari   p       -webkit-hyphens  auto      -moz-hyphens  auto      hyphens  auto      I ve done some basic testing and it seems to work on a recent version of Mobile Safari and Safari 5 1 1   Compatibility table  https   developer mozilla org en CSS hyphens AutoCompatibilityTable

User · Answer

The solution I usually use for this problem is to set 2 different css rules for IE and other browsers   word-wrap  break-word    woks perfect in IE  but word-wrap is not a standard CSS property  It s a Microsoft specific property and doesn t work in Firefox   For Firefox  the best thing to do using only CSS is to set the rule  overflow  hidden    for the element that contains the text you want to wrap  It doesn t wrap the text  but hide the part of text that go over the limit of the container  It can be a nice solution if is not essential for you to display all the text  i e  if the text is inside an  lt a gt  tag

User · Answer

For compatibility with IE 8  use   -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    See it here http   css-tricks com snippets css prevent-long-urls-from-breaking-out-of-container   All I had to do was apply this to the style of the div container with a set width

User · Answer

Add this to css of your div  word-wrap  break-word

User · Answer

Use the style word-break break-all   I know it works on tables

User · Answer

Soft hyphen You can tell browsers where to split long words by inserting soft hyphen   amp shy    averyvery amp shy 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 amp shy  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   lt wbr gt  element Another option is to inject  lt wbr gt   a former IE-ism  which is now in HTML5  averyvery lt wbr gt longword  Breaks with no hyphen   averyvery longword  You can achieve the same with zero-width space character  amp  8203   or  amp  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  lt table gt  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

User · Answer

The solution I usually use for this problem is to set 2 different css rules for IE and other browsers   word-wrap  break-word    woks perfect in IE  but word-wrap is not a standard CSS property  It s a Microsoft specific property and doesn t work in Firefox   For Firefox  the best thing to do using only CSS is to set the rule  overflow  hidden    for the element that contains the text you want to wrap  It doesn t wrap the text  but hide the part of text that go over the limit of the container  It can be a nice solution if is not essential for you to display all the text  i e  if the text is inside an  lt a gt  tag

User · Answer

Two fixes    overflow scroll -- this makes sure your content can be seen at the cost of design  scrollbars are ugly  overflow hidden -- just cuts off any overflow  It means people can t read the content though    If  in the SO example  you want to stop it overlapping the padding  you d probably have to create another div  inside the padding  to hold your content   Edit  As the other answers state  there are a variety of methods for truncating the words  be that working out the render width on the client side  never attempt to do this server-side as it will never work reliably  cross platform  through JS and inserting break-characters  or using non-standard and or wildly incompatible CSS tags  word-wrap  break-word doesn t appear to work in Firefox    You will always need an overflow descriptor though  If your div contains another too-wide block-type piece of content  image  table  etc   you ll need overflow to make it not destroy the layout design   So by all means use another method  or a combination of them  but remember to add overflow too so you cover all browsers   Edit 2  to address your comment below    Start off using the CSS overflow property isn t perfect but it stops designs breaking  Apply overflow hidden first  Remember that overflow might not break on padding so either nest divs or use a border  whatever works best for you    This will hide overflowing content and therefore you might lose meaning  You could use a scrollbar  using overflow auto or overflow scroll instead of overflow hidden  but depending on the dimensions of the div  and your design  this might not look or work great   To fix it  we can use JS to pull things back and do some form of automated truncation  I was half-way through writing out some pseudo code for you but it gets seriously complicated about half-way through  If you need to show as much as possible  give hyphenator a look in  as mentioned below    Just be aware that this comes at the cost of user s CPUs  It could result in pages taking a long time to load and or resize

User · Answer

The solution I usually use for this problem is to set 2 different css rules for IE and other browsers   word-wrap  break-word    woks perfect in IE  but word-wrap is not a standard CSS property  It s a Microsoft specific property and doesn t work in Firefox   For Firefox  the best thing to do using only CSS is to set the rule  overflow  hidden    for the element that contains the text you want to wrap  It doesn t wrap the text  but hide the part of text that go over the limit of the container  It can be a nice solution if is not essential for you to display all the text  i e  if the text is inside an  lt a gt  tag

User · Answer

I just found out about hyphenator from this question  That might solve the problem

User · Answer

p       overflow-wrap  break-word       -moz-document url-prefix          p           white-space  -moz-pre-wrap          word-wrap  break-word

User · Answer

Update  Handling this in CSS is wonderfully simple and low overhead  but you have no control over where breaks occur when they do  That s fine if you don t care  or your data has long alphanumeric runs without any natural breaks  We had lots of long file paths  URLs  and phone numbers  all of which have places it s significantly better to break at than others   Our solution was to first use a regex replacement to put a zero-width space   amp  8203   after every 15  say  characters that aren t whitespace or one of the special characters where we d prefer breaks  We then do another replacement to put a zero-width space after those special characters   Zero-width spaces are nice  because they aren t ever visible on screen  shy hyphens were confusing when they showed  because the data has significant hyphens  Zero-width spaces also aren t included when you copy text out of the browser     The special break characters we re currently using are period  forward slash  backslash  comma  underscore        and hyphen  You wouldn t think you d need do anything to encourage breaking after hyphens  but Firefox  3 6 and 4 at least  doesn t break by itself at hyphens surrounded by numbers  like phone numbers    We also wanted to control the number of characters between artificial breaks  based on the layout space available  That meant that the regex to match long non-breaking runs needed to be dynamic  This gets called a lot  and we didn t want to be creating the same identical regexes over and over for performance reasons  so we used a simple regex cache  keyed by the regex expression and its flags   Here s the code  you d probably namespace the functions in a utility package   makeWrappable   function str  position        if   str          return         position   position    15     default to breaking after 15 chars        matches every requested number of chars that s not whitespace or one of the special chars defined below     var longRunsRegex   cachedRegex       s             -      position             s             -      g        return str                  replace longRunsRegex    1 amp  8203       put a zero-width space every requested number of chars that s not whitespace or a special char                  replace makeWrappable SPECIAL CHARS REGEX    1 amp  8203        and one after special chars we want to allow breaking after    makeWrappable SPECIAL CHARS REGEX                 -   g     period  forward slash  backslash  comma  underscore        hyphen   cachedRegex   function reString  reFlags        var key   reString    reFlags           reFlags            if   cachedRegex cache key           cachedRegex cache key    new RegExp reString  reFlags       return cachedRegex cache key      cachedRegex cache         Test like this   makeWrappable  12345678901234567890 12345678901234567890 1234567890 1234567890     Update 2  It appears that zero-width spaces in fact are included in copied text in at least some circumstances  you just can t see them  Obviously  encouraging people to copy text with hidden characters in it is an invitation to have data like that entered into other programs or systems  even your own  where it may cause problems  For instance  if it ends up in a database  searches against it may fail  and search strings like this are likely to fail too  Using arrow keys to move through data like this requires  rightly  an extra keypress to move across the character you can t see  somewhat bizarre for users if they notice   In a closed system  you can filter that character out on input to protect yourself  but that doesn t help other programs and systems   All told  this technique works well  but I m not certain what the best choice of break-causing character would be   Update 3  Having this character end up in data is no longer a theoretical possibility  it s an observed problem  Users submit data copied off the screen  it gets saved in the db  searches break  things sort weirdly etc     We did two things    Wrote a utility to remove them from all columns of all tables in all datasources for this app  Added filtering to remove it to our standard string input processor  so it s gone by the time any code sees it    This works well  as does the technique itself  but it s a cautionary tale   Update 4  We re using this in a context where the data fed to this may be HTML escaped  Under the right circumstances  it can insert zero-width spaces in the middle of HTML entities  with funky results   Fix was to add ampersand to the list of characters we don t break on  like this   var longRunsRegex   cachedRegex      amp   s             -      position            amp   s             -      g

User · Answer

word-wrap  break-word  works in Firefox 3 5 http   hacks mozilla org 2009 06 word-wrap

User · Answer

If you have this -     lt style type  text css  gt         cell               float  left              width  100px              border  1px solid              line-height  1em             lt  style gt      lt div class  cell  gt TopLeft lt  div gt     lt div class  cell  gt TopMiddlePlusSomeOtherTextWhichMakesItToLong lt  div gt     lt div class  cell  gt TopRight lt  div gt     lt br  gt     lt div class  cell  gt BottomLeft lt  div gt     lt div class  cell  gt BottomMiddle lt  div gt     lt div class  cell  gt bottomRight lt  div gt    just switch to a vertical format with containing divs and use min-width in your CSS instead of width -     lt style type  text css  gt         column               float  left              min-width  100px                 cell2               border  1px solid              line-height  1em             lt  style gt      lt div class  column  gt         lt div class  cell2  gt TopLeft lt  div gt         lt div class  cell2  gt BottomLeft lt  div gt     lt  div gt     lt div class  column  gt         lt div class  cell2  gt TopMiddlePlusSomeOtherTextWhichMakesItToLong lt  div gt         lt div class  cell2  gt BottomMiddle lt  div gt     lt  div gt     lt div class  column  gt         lt div class  cell2  gt TopRight lt  div gt         lt div class  cell2  gt bottomRight lt  div gt     lt  div gt     lt br  gt    Of course  if you are displaying genuine tabular data it is ok to use a real table as it is semantically correct and will inform people using screen readers that is supposed to be in a table  It is using them for general layout or image-slicing that people will lynch you for

User · Answer

If you have this -     lt style type  text css  gt         cell               float  left              width  100px              border  1px solid              line-height  1em             lt  style gt      lt div class  cell  gt TopLeft lt  div gt     lt div class  cell  gt TopMiddlePlusSomeOtherTextWhichMakesItToLong lt  div gt     lt div class  cell  gt TopRight lt  div gt     lt br  gt     lt div class  cell  gt BottomLeft lt  div gt     lt div class  cell  gt BottomMiddle lt  div gt     lt div class  cell  gt bottomRight lt  div gt    just switch to a vertical format with containing divs and use min-width in your CSS instead of width -     lt style type  text css  gt         column               float  left              min-width  100px                 cell2               border  1px solid              line-height  1em             lt  style gt      lt div class  column  gt         lt div class  cell2  gt TopLeft lt  div gt         lt div class  cell2  gt BottomLeft lt  div gt     lt  div gt     lt div class  column  gt         lt div class  cell2  gt TopMiddlePlusSomeOtherTextWhichMakesItToLong lt  div gt         lt div class  cell2  gt BottomMiddle lt  div gt     lt  div gt     lt div class  column  gt         lt div class  cell2  gt TopRight lt  div gt         lt div class  cell2  gt bottomRight lt  div gt     lt  div gt     lt br  gt    Of course  if you are displaying genuine tabular data it is ok to use a real table as it is semantically correct and will inform people using screen readers that is supposed to be in a table  It is using them for general layout or image-slicing that people will lynch you for

User · Answer

Re the regex in this comment  it s good  but it adds the shy hyphen only between groups of 5 non-whitespace-or-hyphen chars  That allows the last group be much longer than intended  since there s no matching group after it   For instance  this    abcde12345678901234  replace      s-  5      s-  5   g    1 amp shy  2        results in this   abcde amp shy 12345678901234   Here s a version using positive lookahead to avoid that problem    replace      s-  5        s-   g    1 amp shy         with this result   abcde amp shy 12345 amp shy 67890 amp shy 1234

User · Answer

Just checked IE 7  Firefox 3 6 8 Mac  Firefox 3 6 8 Windows  and Safari   word-wrap  break-word    works for long links inside of a div with a set width and no overflow declared in the css    consumeralerts leftcol      float left      width  250px      margin-bottom 10px      word-wrap  break-word      I don t see any incompatibility issues

User · Answer

after all the word wraps and breaks  preserve your overflow and see if this solves your issue  simply change your div s display to  display  inline

User · Answer

Two fixes    overflow scroll -- this makes sure your content can be seen at the cost of design  scrollbars are ugly  overflow hidden -- just cuts off any overflow  It means people can t read the content though    If  in the SO example  you want to stop it overlapping the padding  you d probably have to create another div  inside the padding  to hold your content   Edit  As the other answers state  there are a variety of methods for truncating the words  be that working out the render width on the client side  never attempt to do this server-side as it will never work reliably  cross platform  through JS and inserting break-characters  or using non-standard and or wildly incompatible CSS tags  word-wrap  break-word doesn t appear to work in Firefox    You will always need an overflow descriptor though  If your div contains another too-wide block-type piece of content  image  table  etc   you ll need overflow to make it not destroy the layout design   So by all means use another method  or a combination of them  but remember to add overflow too so you cover all browsers   Edit 2  to address your comment below    Start off using the CSS overflow property isn t perfect but it stops designs breaking  Apply overflow hidden first  Remember that overflow might not break on padding so either nest divs or use a border  whatever works best for you    This will hide overflowing content and therefore you might lose meaning  You could use a scrollbar  using overflow auto or overflow scroll instead of overflow hidden  but depending on the dimensions of the div  and your design  this might not look or work great   To fix it  we can use JS to pull things back and do some form of automated truncation  I was half-way through writing out some pseudo code for you but it gets seriously complicated about half-way through  If you need to show as much as possible  give hyphenator a look in  as mentioned below    Just be aware that this comes at the cost of user s CPUs  It could result in pages taking a long time to load and or resize

User · Answer

Yeah  if it is possible  setting an absolute width and setting overflow   auto works well

User · Answer

Re the regex in this comment  it s good  but it adds the shy hyphen only between groups of 5 non-whitespace-or-hyphen chars  That allows the last group be much longer than intended  since there s no matching group after it   For instance  this    abcde12345678901234  replace      s-  5      s-  5   g    1 amp shy  2        results in this   abcde amp shy 12345678901234   Here s a version using positive lookahead to avoid that problem    replace      s-  5        s-   g    1 amp shy         with this result   abcde amp shy 12345 amp shy 67890 amp shy 1234

User · Answer

HYPHENATOR is the right answer  given above   The real problem behind your question is that web browsers are still  in 2008  extremely primitive that they do not have a hyphenation-feature  Look  we are still on the early beginnings of computer usage - we have to be patient  As long as designers rule the web world we will have a hard time waiting for some real useful new features    UPDATE   As of December  2011  we now have another option  with the emerging support of these tags in FF and Safari   p       -webkit-hyphens  auto      -moz-hyphens  auto      hyphens  auto      I ve done some basic testing and it seems to work on a recent version of Mobile Safari and Safari 5 1 1   Compatibility table  https   developer mozilla org en CSS hyphens AutoCompatibilityTable

User · Answer

After much fighting  this is what worked for me    pre       font-weight  500      font-family  Courier New  monospace      white-space  pre-wrap      word-wrap  break-word      word-break  break-all      -webkit-hyphens  auto      -moz-hyphens  auto      hyphens  auto      Works in the latest versions of Chrome  Firefox and Opera   Note that I excluded many of the white-space properties the others suggested -- that actually broke the pre indentation for me

User · Answer

Update  Handling this in CSS is wonderfully simple and low overhead  but you have no control over where breaks occur when they do  That s fine if you don t care  or your data has long alphanumeric runs without any natural breaks  We had lots of long file paths  URLs  and phone numbers  all of which have places it s significantly better to break at than others   Our solution was to first use a regex replacement to put a zero-width space   amp  8203   after every 15  say  characters that aren t whitespace or one of the special characters where we d prefer breaks  We then do another replacement to put a zero-width space after those special characters   Zero-width spaces are nice  because they aren t ever visible on screen  shy hyphens were confusing when they showed  because the data has significant hyphens  Zero-width spaces also aren t included when you copy text out of the browser     The special break characters we re currently using are period  forward slash  backslash  comma  underscore        and hyphen  You wouldn t think you d need do anything to encourage breaking after hyphens  but Firefox  3 6 and 4 at least  doesn t break by itself at hyphens surrounded by numbers  like phone numbers    We also wanted to control the number of characters between artificial breaks  based on the layout space available  That meant that the regex to match long non-breaking runs needed to be dynamic  This gets called a lot  and we didn t want to be creating the same identical regexes over and over for performance reasons  so we used a simple regex cache  keyed by the regex expression and its flags   Here s the code  you d probably namespace the functions in a utility package   makeWrappable   function str  position        if   str          return         position   position    15     default to breaking after 15 chars        matches every requested number of chars that s not whitespace or one of the special chars defined below     var longRunsRegex   cachedRegex       s             -      position             s             -      g        return str                  replace longRunsRegex    1 amp  8203       put a zero-width space every requested number of chars that s not whitespace or a special char                  replace makeWrappable SPECIAL CHARS REGEX    1 amp  8203        and one after special chars we want to allow breaking after    makeWrappable SPECIAL CHARS REGEX                 -   g     period  forward slash  backslash  comma  underscore        hyphen   cachedRegex   function reString  reFlags        var key   reString    reFlags           reFlags            if   cachedRegex cache key           cachedRegex cache key    new RegExp reString  reFlags       return cachedRegex cache key      cachedRegex cache         Test like this   makeWrappable  12345678901234567890 12345678901234567890 1234567890 1234567890     Update 2  It appears that zero-width spaces in fact are included in copied text in at least some circumstances  you just can t see them  Obviously  encouraging people to copy text with hidden characters in it is an invitation to have data like that entered into other programs or systems  even your own  where it may cause problems  For instance  if it ends up in a database  searches against it may fail  and search strings like this are likely to fail too  Using arrow keys to move through data like this requires  rightly  an extra keypress to move across the character you can t see  somewhat bizarre for users if they notice   In a closed system  you can filter that character out on input to protect yourself  but that doesn t help other programs and systems   All told  this technique works well  but I m not certain what the best choice of break-causing character would be   Update 3  Having this character end up in data is no longer a theoretical possibility  it s an observed problem  Users submit data copied off the screen  it gets saved in the db  searches break  things sort weirdly etc     We did two things    Wrote a utility to remove them from all columns of all tables in all datasources for this app  Added filtering to remove it to our standard string input processor  so it s gone by the time any code sees it    This works well  as does the technique itself  but it s a cautionary tale   Update 4  We re using this in a context where the data fed to this may be HTML escaped  Under the right circumstances  it can insert zero-width spaces in the middle of HTML entities  with funky results   Fix was to add ampersand to the list of characters we don t break on  like this   var longRunsRegex   cachedRegex      amp   s             -      position            amp   s             -      g

User · Answer

Do you mean that  in browsers that support it  word-wrap  break-word does not work    If included in the body definition of the stylesheet  it should works throughout the entire document   If overflow is not a good solution  only a custom javascript could artificially break up long word   Note  there is also this  lt wbr gt  Word Break tag  This gives the browser a spot where it can split the line up  Unfortunately  the  lt wbr gt  tag doesn t work in all browsers  only Firefox and Internet Explorer  and Opera with a CSS trick

User · Answer

Soft hyphen You can tell browsers where to split long words by inserting soft hyphen   amp shy    averyvery amp shy 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 amp shy  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   lt wbr gt  element Another option is to inject  lt wbr gt   a former IE-ism  which is now in HTML5  averyvery lt wbr gt longword  Breaks with no hyphen   averyvery longword  You can achieve the same with zero-width space character  amp  8203   or  amp  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  lt table gt  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

User · Answer

Use this  word-wrap  break-word  overflow-wrap  break-word  word-break  break-all

User · Answer

I had to do the following because  if the properties were not declared in the correct order  it would randomly break words at the wrong place and without adding a hyphen         -moz-white-space  pre-wrap  white-space  pre-wrap              hyphens  auto      -ms-word-break  break-all      -ms-word-wrap  break-all      -webkit-word-break  break-word      -webkit-word-wrap  break-word  word-break  break-word  word-wrap  break-word      -webkit-hyphens  auto      -moz-hyphens  auto      -ms-hyphens  auto  hyphens  auto    Originally posted by Enigmo  https   stackoverflow com a 14191114

User · Answer

Two fixes    overflow scroll -- this makes sure your content can be seen at the cost of design  scrollbars are ugly  overflow hidden -- just cuts off any overflow  It means people can t read the content though    If  in the SO example  you want to stop it overlapping the padding  you d probably have to create another div  inside the padding  to hold your content   Edit  As the other answers state  there are a variety of methods for truncating the words  be that working out the render width on the client side  never attempt to do this server-side as it will never work reliably  cross platform  through JS and inserting break-characters  or using non-standard and or wildly incompatible CSS tags  word-wrap  break-word doesn t appear to work in Firefox    You will always need an overflow descriptor though  If your div contains another too-wide block-type piece of content  image  table  etc   you ll need overflow to make it not destroy the layout design   So by all means use another method  or a combination of them  but remember to add overflow too so you cover all browsers   Edit 2  to address your comment below    Start off using the CSS overflow property isn t perfect but it stops designs breaking  Apply overflow hidden first  Remember that overflow might not break on padding so either nest divs or use a border  whatever works best for you    This will hide overflowing content and therefore you might lose meaning  You could use a scrollbar  using overflow auto or overflow scroll instead of overflow hidden  but depending on the dimensions of the div  and your design  this might not look or work great   To fix it  we can use JS to pull things back and do some form of automated truncation  I was half-way through writing out some pseudo code for you but it gets seriously complicated about half-way through  If you need to show as much as possible  give hyphenator a look in  as mentioned below    Just be aware that this comes at the cost of user s CPUs  It could result in pages taking a long time to load and or resize

User · Answer

Do you mean that  in browsers that support it  word-wrap  break-word does not work    If included in the body definition of the stylesheet  it should works throughout the entire document   If overflow is not a good solution  only a custom javascript could artificially break up long word   Note  there is also this  lt wbr gt  Word Break tag  This gives the browser a spot where it can split the line up  Unfortunately  the  lt wbr gt  tag doesn t work in all browsers  only Firefox and Internet Explorer  and Opera with a CSS trick

User · Answer

Two fixes    overflow scroll -- this makes sure your content can be seen at the cost of design  scrollbars are ugly  overflow hidden -- just cuts off any overflow  It means people can t read the content though    If  in the SO example  you want to stop it overlapping the padding  you d probably have to create another div  inside the padding  to hold your content   Edit  As the other answers state  there are a variety of methods for truncating the words  be that working out the render width on the client side  never attempt to do this server-side as it will never work reliably  cross platform  through JS and inserting break-characters  or using non-standard and or wildly incompatible CSS tags  word-wrap  break-word doesn t appear to work in Firefox    You will always need an overflow descriptor though  If your div contains another too-wide block-type piece of content  image  table  etc   you ll need overflow to make it not destroy the layout design   So by all means use another method  or a combination of them  but remember to add overflow too so you cover all browsers   Edit 2  to address your comment below    Start off using the CSS overflow property isn t perfect but it stops designs breaking  Apply overflow hidden first  Remember that overflow might not break on padding so either nest divs or use a border  whatever works best for you    This will hide overflowing content and therefore you might lose meaning  You could use a scrollbar  using overflow auto or overflow scroll instead of overflow hidden  but depending on the dimensions of the div  and your design  this might not look or work great   To fix it  we can use JS to pull things back and do some form of automated truncation  I was half-way through writing out some pseudo code for you but it gets seriously complicated about half-way through  If you need to show as much as possible  give hyphenator a look in  as mentioned below    Just be aware that this comes at the cost of user s CPUs  It could result in pages taking a long time to load and or resize

User · Answer

For me on a div without fixed size and with dynamic content it worked using   display table  word-break break-all

User · Answer

Add this to css of your div  word-wrap  break-word

[css] How to prevent long words from breaking my div?

Examples related to css

Examples related to layout

Examples related to html