Wrap text in td tag

Question

I want to wrap some text that is added to a  lt td gt  element  I have tried with style  word-wrap  break-word   width  15    But it is not wrapping the text  Is it mandatory to give it 100  width  I have other controls to display so only 15  width is available

User · Answer

Apply classes to your TDs  apply the appropriate widths  remember to leave one of them without a width so it assumes the remainder of the width   then apply the appropriate styles  Copy and paste the code below into an editor and view in a browser to see it function    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt   lt title gt Untitled Document lt  title gt   lt style type  text css  gt   lt  -- td   vertical-align  top     leftcolumn   background   CCC  width  20   padding  10px     centercolumn   background   999  padding  10px  width  15      rightcolumn   background   666  padding  10px    -- gt   lt  style gt   lt  head gt    lt body gt   lt table border  0  cellspacing  0  cellpadding  0  gt     lt tr gt       lt td class  leftcolumn  gt This is the left column  It is set to 20  width  lt  td gt       lt td class  centercolumn  gt           lt p gt Hi  lt  p gt           lt p gt I want to wrap a text that is added to the TD  I have tried with style  word-wrap  break-word   width  15    But the wrap is not happening  Is it mandatory to give 100  width   But I have got other controls to display so only 15  width available  lt  p gt           lt p gt Need help  lt  p gt           lt p gt TIA  lt  p gt       lt  td gt       lt td class  rightcolumn  gt This is the right column  it has no width so it assumes the remainder from the 15  and 20  assumed by the others  By default  if a width is applied and no white-space declarations are made  your text will automatically wrap  lt  td gt     lt  tr gt   lt  table gt   lt  body gt   lt  html gt

User · Answer

Actually wrapping of text happens automatically in tables  The blunder people commit while testing is to hypothetically assume a long string like  ggggggggggggggggggggggggggggggggggggggggggggggg  and complain that it doesn t wrap  Practically there is no word in English that is this long and even if there is  there is a faint chance that it will be used within that  lt td gt    Try testing with sentences like  Counterposition is superstitious in predetermining circumstances

User · Answer

HTML tables support a  table-layout fixed  css style that prevents the user agent from adapting column widths to their content  You might want to use it

User · Answer

This worked for me with some css frameworks  material design lite  MDL     table     table-layout  fixed    white-space  normal important     td     word-wrap  break-word

User · Answer

I believe you ve encountered the catch 22 of tables   Tables are great for wrapping up content in a tabular structure and they do a wonderful job of  stretching  to meet the needs of the content they contain   By default the table cells will stretch to fit content    thus your text just makes it wider   There s a few solutions   1   You can try setting a max-width on the TD    lt td style  max-width 150px   gt    2   You can try putting your text in a wrapping element  e g  a span  and set constraints on it    lt td gt  lt span style  max-width 150px   gt Hello World    lt  span gt  lt  td gt    Be aware though that older versions of IE don t support min max-width   Since IE doesn t support max-width natively you ll need to add a hack if you want to force it to  There s several ways to add a hack  this is just one   On page load  for IE6 only  get the rendered width of the table  in pixels  then get 15  of that and apply that as the width to the first TD in that column  or TH if you have headers  again  in pixels

User · Answer

To Wrap TD text  First set table style  table      table-layout  fixed      then set TD Style   td      word-wrap break-word

User · Answer

I had some of my tds with   white-space  pre    This solved it for me     white-space  pre-wrap

User · Answer

use word-break it can be used without styling table to table-layout  fixed   x000D   x000D  table   x000D    width  140px  x000D    border  1px solid  bbb x000D    x000D   x000D   tdbreak   x000D    word-break  break-all x000D    x000D   lt p gt without word-break lt  p gt  x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   lt p gt with word-break lt  p gt  x000D   lt table gt  x000D     lt tr gt  x000D       lt td class  tdbreak  gt LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

To make cell width exactly same as the longest word of the text  just set width of the cell to 1px  i e   td     width  1px      This is experimental and i came to know about this while doing trial and error  Live fiddle  http   jsfiddle net harshjv 5e2oLL8L 2

User · Answer

This works really well    lt td gt  lt div style    width 80px  word-wrap  break-word  gt  your text  lt  div gt  lt  td gt     You can use the same width for all your  lt div s  or adjust the width in each case to break your text wherever you like   This way you do not have to fool around with fixed table widths  or complex css

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt  table  th  td       border  1px solid black     lt  style gt   lt  head gt   lt body gt    lt table gt     lt tr gt       lt th gt Poem lt  th gt       lt th gt Poem lt  th gt     lt  tr gt     lt tr gt       lt td nowrap gt Never increase  beyond what is necessary  the number of entities required to explain anything lt  td gt       lt td gt Never increase  beyond what is necessary  the number of entities required to explain anything lt  td gt     lt  tr gt   lt  table gt    lt p gt The nowrap attribute is not supported in HTML5  Use CSS instead  lt  p gt    lt  body gt   lt  html gt

User · Answer

table-layout fixed will resolve the expanding cell problem  but will create a new one  IE by default will hide the overflow but Mozilla will render it outside the box   Another solution would be to use  overflow hidden width  px   lt table style  table-layout fixed  width 100px  gt    lt tr gt      lt td style  overflow hidden  width 50px   gt fearofthedarkihaveaconstantfearofadark lt  td gt      lt td gt       test     lt  td gt    lt  tr gt   lt  table gt

User · Answer

tbl       table-layout fixed      border-collapse  collapse      background   fff       tbl td       text-overflow ellipsis      overflow hidden      white-space nowrap      Credits to http   www blakems com archives 000077 html

User · Answer

It s possible that this might work  but it might prove to be a bit of a nuisance at some point in the future  if not immediately     lt style gt   tbody td span  display  inline-block                 width  10em     this is the nuisance part  as you ll have to define a particular width  and I assume -without testing- that any percent widths would be relative to the containing   lt td gt    not the   lt tr gt   or   lt table gt                     overflow  hidden                  white-space  nowrap      lt  style gt         lt table gt    lt thead gt     lt  thead gt   lt tfoot gt     lt  tfoot gt    lt tbody gt    lt tr gt    lt td gt  lt span title  some text  gt some text lt  span gt  lt  td gt   lt td gt  lt span title  some more text  gt some more text lt  span gt  lt  td gt   lt td gt  lt span title  yet more text  gt yet more text lt  span gt  lt  td gt    lt  tr gt    lt  tbody gt    lt  table gt    The rationale for the span is that  as pointed out by others  a  lt td gt  will typically expand to accommodate the content  whereas a  lt span gt  can be given -and expected to keep- a set width  the overflow  hidden is intended to  but might not  hide what would otherwise cause the  lt td gt  to expand   I d recommend using the title property of the span to show the text that s present  or clipped  in the visual cell  so that the text s still available  and if you don t want need people to see it  then why have it in the first place  I guess       Also  if you define a width for the td       the td will expand  or potentially contract  but I doubt it  to fill its implied width  as I see it this seems to be table-width number-of-cells   a specified table-width doesn t seem to create the same issue   The downside is additional markup used for presentation

[html] Wrap text in <td> tag

Examples related to html

Examples related to css

Examples related to html-table

Examples related to word-wrap