How to force a line break in a long word in a DIV

Question

Okay  this is really confusing me  I have some content inside of a div like so    lt div style  background-color  green  width  200px  height  300px   gt   Thisisatest Thisisatest Thisisatest Thisisatest Thisisatest Thisisatest    lt  div gt    However  the content overflows the DIV  as expected  because the  word  is too long   How can I force the browser to  break  the word where necessary to fit all of the content inside

User · Answer

Remove white-space  nowrap  if there is any   Implement   white-space  inherit  word-break  break-word

User · Answer

amp  8203  is the HTML entity for a unicode character called the zero-width space  ZWSP  which is an invisible character which specifies a line-break opportunity   Similarly the hyphen s purpose is to specify a line-break opportunity within a word boundary

User · Answer

Use word-wrap break-word   It even works in IE6  which is a pleasant surprise     word-wrap  break-word has been replaced with overflow-wrap  break-word  which works in every modern browser  IE  being a dead browser  will forever rely on the deprecated and non-standard word-wrap instead    Existing uses of word-wrap today still work as it is an alias for overflow-wrap per the specification

User · Answer

Found that using the following worked across most major browsers  Chrome  IE  Safari iOS OSX  except Firefox  v50 0 2  when using flexbox and relying on width  auto    your element       word-wrap  break-word         overflow-wrap  break-word      word-break  break-word      Note  you may need to add browser vendor prefixes if you are not using an autoprefixer   Another thing to watch out for is text using  amp nbsp  for spacing can cause line breaks mid-word

User · Answer

From MDN   The overflow-wrap CSS property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box  In contrast to word-break  overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing   So you can use  overflow-wrap  break-word   Can I use

User · Answer

This could be added to the accepted answer for a  cross-browser  solution   Sources    http   kenneth io blog 2012 03 04 word-wrapping-hypernation-using-css  http   css-tricks com snippets css prevent-long-urls-from-breaking-out-of-container     your element      -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

User · Answer

Whitespace is preserved by the browser  Text will wrap when necessary  and on line breaks   pre-wrap       white-space  pre-wrap      word-break  break-word      DEMO   x000D   x000D  td   x000D     word-break  break-word  x000D     white-space  pre-wrap  x000D     -moz-white-space  pre-wrap        x000D    x000D   x000D  table   x000D      width  100px  x000D      border  1px solid black  x000D      display  block  x000D    x000D   lt table gt  x000D   lt tr gt  lt th gt list lt  th gt  x000D   lt td gt  x000D  1 longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext x000D  2 breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline x000D   lt  td gt  x000D   lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

just try this in our style  white-space  normal

User · Answer

Do this    lt div id  sampleDiv  gt aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa lt  div gt    sampleDiv     overflow-wrap  break-word

User · Answer

CSS word-wrap break-word   tested in FireFox 3 6 3

User · Answer

I was just Googling the same issue  and posted my final solution HERE   It s relevant to this question too   You can do this easily with a div by giving it the style word-wrap  break-word  and you may need to set its width  too      div       word-wrap  break-word             All browsers since IE 5 5         overflow-wrap  break-word         Renamed property in CSS3 draft spec        width  100       However  for tables  you also need to apply  table-layout  fixed   This means the columns widths are no longer fluid  but are defined based on the widths of the columns in the first row only  or via specified widths   Read more here   Sample code   table       table-layout  fixed      width  100      table td       word-wrap  break-word             All browsers since IE 5 5         overflow-wrap  break-word         Renamed property in CSS3 draft spec

User · Answer

I solved my problem with code below   display  table-caption

User · Answer

As mentioned in  davidcondrey s reply  there is not just the ZWSP  but also the SHY  amp  173   amp shy  that can be used in very long  constructed words  think German or Dutch  that have to be broken on the spot you want it to be   Invisible  but it gives a hyphen the moment it s needed  thus keeping both word connected and line filled to the utmost   That way the word luchthavenpolitieagent might be noted as lucht amp shy haven amp shy politie amp shy agent which gives longer parts than the syllables of the word  Though I never read anything official about it  these soft hyphens manage to get higher priority in browsers than the official hyphens in the single words of the construct  if they have some extension for it at all   In practice  no browser is capable of breaking such a long  constructed word by itself  on smaller screens resulting in a new line for it  or in some cases even a one-word-line  like when two of those constructed words follow up     FYI  it s Dutch for airport police officer

User · Answer

First you should identify the width of your element  E g    x000D   x000D   sampleDiv  x000D    width  80   x000D    word-wrap break-word  x000D    x000D   lt div id  sampleDiv  gt aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa lt  div gt  x000D   x000D   x000D    so that when the text reaches the element width  it will be broken down into lines

User · Answer

I am not sure about the browser compatibility  word-break  break-all    Also you can use the  lt wbr gt  tag      lt wbr gt   word break  means   The browser   may insert a line break here  if it   wishes   It the browser does not think   a line break necessary nothing   happens

User · Answer

word-break  normal seems better to use than word-break  break-word because break-word breaks initials such as EN word-break  normal

[html] How to force a line break in a long word in a DIV?

Examples related to html

Examples related to css

Examples related to line-breaks