word-wrap break-word does not work in this example

Question

I cannot get word-wrap to work with this example      lt html gt   lt head gt  lt  head gt   lt body gt    lt table style  table-layout fixed   gt   lt tr gt   lt td style  word-wrap  break-word  width 100px   gt ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap lt  td gt   lt  tr gt   lt  table gt    lt  body gt  lt  html gt    I remembered reading that a layout had to be specified  which I did   but beyond that I m not sure what I have to do to get this to work   I really would like this to work in Firefox   Thanks   EDIT  Failed in Chrome 19 and Firefox 12  it works in IE8  I tried doctype strict and transitional  neither worked

User · Answer

word-wrap property work s with display inline-block   display  inline-block  word-wrap  break-word  width  100px

User · Answer

inline-block is of no use in this scenario  SOLUTION  word-break  normal break-all keep-all break-word initial inherit  Simple Answer to your doubt is Use above and make sure white-space  nowrap nowhere used   NOTE FOR BETTER UNDERSTANDING   word-wrap overflow-wrap is used to break words that overflow their container  word-break property breaks all words at the end of a line  even those that would normally wrap onto another line and wouldn   t overflow their container   word-wrap is the historic and nonstandard property  It has been renamed to overflow-wrap but remains an alias  browsers must support in future  Many browsers  especially the old ones  don   t support overflow-wrap and require word-wrap as a fallback  which is supported by all    If you want to please the W3C you should consider associate both in your CSS  If you don   t  using word-wrap alone is just fine

User · Answer

Use this code  taken from css-tricks  that will work on all browser  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

User · Answer

to get the smart break  break-word  work well on different browsers  what worked for me was the following set of rules    elm       word-break break-word     webkit blink browsers        word-wrap break-word     ie      -moz-document url-prefix       catch ff         elm           word-break  break-all     in ff-  with no break-word we ll settle for break-all

User · Answer

Work-Break has nothing to do with inline-block  Make sure you specify width and notice if there are any overriding attributes in parent nodes  Make sure there is not white-space  nowrap  see this codepen  x000D   x000D   lt html gt    lt head gt   lt  head gt    lt body gt     lt style scoped gt       parent         width  100vw             p         border  1px dashed black        padding  1em        font-size  calc 0 6vw   0 6em         direction  ltr        width  30vw        margin auto        text-align justify        word-break  break-word        white-space  pre-line        overflow-wrap  break-word        -ms-word-break  break-word        word-break  break-word        -ms-hyphens  auto        -moz-hyphens  auto        -webkit-hyphens  auto        hyphens  auto                   lt  style gt     lt div class  parent  gt        lt p gt        Note  Mind that  as for now  break-word is not part of the standard specification for webkit  therefore  you might be interested in employing the break-all instead  This alternative value provides a undoubtedly drastic solution  however  it conforms to       the standard        lt  p gt      lt  div gt    lt  body gt    lt  html gt  x000D   x000D   x000D

User · Answer

This combination of properties helped for me   display  inline-block  overflow-wrap  break-word  word-wrap  break-word  word-break  normal  line-break  strict  hyphens  none  -webkit-hyphens  none  -moz-hyphens  none

User · Answer

Mozilla Firefox solution  Add   display  inline-block    to the style of your td   Webkit based browsers  Google Chrome  Safari       solution  Add   display  inline-block  word-break  break-word    to the style of your td   Note  Mind that  as for now  break-word is not part of the standard specification for webkit  therefore  you might be interested in employing the break-all instead  This alternative value provides a undoubtedly drastic solution  however  it conforms to the standard   Opera solution  Add   display  inline-block  word-break  break-word    to the style of your td   The previous paragraph applies to Opera in a similar way

User · Answer

This code is also working     x000D   x000D   lt html gt  x000D   lt head gt  lt  head gt  x000D   lt body gt  x000D   x000D   lt table style  table-layout fixed   gt  x000D   lt tr gt  x000D   lt td style  word-break  break-all  width 100px   gt ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap lt  td gt  x000D   lt  tr gt  x000D   lt  table gt  x000D   x000D   lt  body gt  lt  html gt  x000D   x000D   x000D

[html] word-wrap break-word does not work in this example

Examples related to html

Examples related to css