Using word-wrap break-word within a table

Question

Possible Duplicate    Word-wrap in a html table       This text behaves exactly the way I want on Google Chrome  and other modern browsers     lt div style  border  1px solid black  width 100   word-wrap  break-word   gt     lt p gt      aaaaaaaaaaaaaaaa     bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb    lt  p gt   lt  div gt     When the browser is wide enough  a  and b  are on the same line    aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb  As you narrow the browser  a  and b  are put on separate lines   aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb  When b  can no longer fit  it is broken and put on two lines  for a total of three lines    aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbb    That s all great   In my situation  however  this is not a div but a table  like so    lt table style  border 1px solid black  width 100   word-wrap break-word   gt     lt tr gt       lt td gt         lt p gt          aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa         bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb        lt  p gt       lt  td gt     lt  tr gt   lt  table gt    In this case   1 and  2 happen  but not  3  That is  the table stops narrowing after step 2 and step 3 doesn t ever happen  The break-word doesn t seem to be filtering down   Does anyone know how make  3 happen   The solution only need work in Chrome  but it it also worked in other browsers that would be even better   P S   Don t use tables  is not helpful

User · Answer

You can try this   td p  word-break break-all    This  however  makes it appear like this when there s enough space  unless you add a  lt br gt  tag   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb   So  I would then suggest adding  lt br gt  tags where there are newlines  if possible   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb   http   jsfiddle net LLyH3 3   Also  if this doesn t solve your problem  there s a similar thread here

User · Answer

table-layout  fixed will get force the cells to fit the table  and not the other way around   e g     lt table style  border  1px solid black  width  100   word-wrap break-word                table-layout  fixed   gt     lt tr gt       lt td gt          aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa         bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb      lt  td gt     lt  tr gt   lt  table gt

[css] Using "word-wrap: break-word" within a table

Examples related to css

Examples related to google-chrome

Examples related to html-table

Examples related to word-wrap