How to force table cell td content to wrap

Question

Heres the entire page   wrappable is defined in a main css file     Wrappable cell   Add this class to make sure the text in a cell will wrap    By default  data table tds do not wrap     td wrappable  table data table td wrappable       white-space  normal                      Heres the entire page    lt    include file        include pre-header html    gt   lt form id  commentForm  name  commentForm  action    method  post  gt          lt ctl vertScroll height  300  headerStyleClass  data table scroll  bodyStyleClass  data table scroll  enabled    user scrollTables   gt           lt ctl sortableTblHdrSetup topTotal  false  href  show whatif edit entry    entryId   entry entryId     gt           lt table class  data table vert scroll table  gt                  lt  tr gt               lt tr gt                   lt ctl sortableTblHdr styleClass  center  title  Comments  property  comment  type  top  gt Comments lt  ctl sortableTblHdr gt               lt  tr gt                 lt c forEach var  comments  items    entry comments   gt                     lt tr id  id  comments id   gt                       lt td id  comments-  comments id   class  wrappable  style  width 400px   gt   comments comment  lt  td gt                   lt  tr gt                  lt  c forEach gt               lt c if test    lock locked    form entryId  lt  0    gt                   lt  -- This is the row for adding a new comment  --  gt                       lt tr id  commentRow  gt                           lt td gt  lt input type  text  id  comment  name  comment  size  50  maxlength  250  onkeypress  javascript return noenter       gt                               lt a href  javascript addComment     gt  lt img src     images icon add gif  border  0  alt  Add   gt  lt  a gt                           lt  td gt                        lt  tr gt               lt  c if gt            lt  table gt        lt  ctl vertScroll gt   lt  form gt    It just stretches every time I submit  This page is within a div also  Do I need to set the width of the div and the table also

User · Accepted Answer

Use table-layout fixed in the table and word-wrap break-word in the td   See this example    lt html gt   lt head gt      lt style gt     table  border-collapse collapse  table-layout fixed  width 310px      table td  border solid 1px  fab  width 100px  word-wrap break-word       lt  style gt   lt  head gt    lt body gt      lt table gt         lt tr gt            lt td gt 1 lt  td gt            lt td gt Lorem Ipsum lt  td gt            lt td gt Lorem Ipsum is simply dummy text of the printing and typesetting industry   lt  td gt         lt  tr gt         lt tr gt            lt td gt 2 lt  td gt            lt td gt LoremIpsumhasbeentheindustry sstandarddummytexteversincethe1500s whenanunknown lt  td gt            lt td gt Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  lt  td gt         lt  tr gt         lt tr gt            lt td gt 3 lt  td gt            lt td gt  lt  td gt            lt td gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna    lt  td gt         lt  tr gt      lt  table gt   lt  body gt   lt  html gt    DEMO    x000D   x000D  table  border-collapse collapse  table-layout fixed  width 310px   x000D         table td  border solid 1px  fab  width 100px  word-wrap break-word   x000D          lt table gt  x000D             lt tr gt  x000D                lt td gt 1 lt  td gt  x000D                lt td gt Lorem Ipsum lt  td gt  x000D                lt td gt Lorem Ipsum is simply dummy text of the printing and typesetting industry   lt  td gt  x000D             lt  tr gt  x000D             lt tr gt  x000D                lt td gt 2 lt  td gt  x000D                lt td gt LoremIpsumhasbeentheindustry sstandarddummytexteversincethe1500s whenanunknown lt  td gt  x000D                lt td gt Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  lt  td gt  x000D             lt  tr gt  x000D             lt tr gt  x000D                lt td gt 3 lt  td gt  x000D                lt td gt  lt  td gt  x000D                lt td gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna    lt  td gt  x000D             lt  tr gt  x000D          lt  table gt  x000D       x000D   x000D   x000D

User · Answer

if you want to wrap the data in td then you can use the below code td      width 60       word-break  break-word

User · Answer

This is another way of tackling the problem if you have long strings  like file path names  and you only want to break the strings on certain characters  like slashes   You can insert Unicode Zero Width Space characters just before  or after  the slashes in the HTML

User · Answer

This worked for me when I needed to display  pretty  JSON in a cell   td   white-space pre       More about the white-space property         normal   This value directs user agents to collapse sequences of white space  and break lines as necessary to fill line boxes      pre   This value prevents user agents from collapsing sequences of white space      Lines are only broken at preserved newline characters      nowrap   This value collapses white space as for normal  but suppresses line breaks within text      pre-wrap   This value prevents user agents from collapsing sequences of white space      Lines are broken at preserved newline characters  and as necessary to fill line boxes      pre-line   This value directs user agents to collapse sequences of white space      Lines are broken at preserved newline characters  and as necessary to fill line boxes          Also  see more at the source

User · Answer

wrappable          overflow  hidden         max-width  400px         word-wrap  break-word       I have tested with the binary data and its working perfectly here

User · Answer

If you are using Bootstrap responsive table  just want to set the maximum width for one particular column and make text wrapping  making the the style of this column as following also works  max-width someValue  word-wrap break-word

User · Answer

Its works for me    lt style type  text css  gt    td           css-3        white-space  -o-pre-wrap       word-wrap  break-word      white-space  pre-wrap       white-space  -moz-pre-wrap       white-space  -pre-wrap        And table attribute is   table      table-layout  fixed    width  100

User · Answer

Just add    word-break  break-word      to you table class

User · Answer

If you want fix the column you should set width  For example    lt td style  width 100px   gt some data lt  td gt

User · Answer

I solve it putting a  quot p quot  tag inside of my  quot td quot  tag like this   lt td gt  lt p class  quot  quot  gt This is my loooooooong paragraph lt  p gt  lt  td gt   Then add this properties to the class  using max-width to define how wide you want your field to be  p-wrap     max-width  400px    word-wrap  break-word    white-space  pre-wrap    font-size  12px

User · Answer

td   overflow  hidden  max-width  400px  word-wrap  break-word

[html] How to force table cell <td> content to wrap?

DEMO:

Examples related to html

Examples related to css

Examples related to html-table