force line break in html table cell

Question

I m trying to find a way to force line break in table cell after text inside of it will become longer than say 50  of max allowed size    How can I do it without any JS function  using just pure HTML with CSS

User · Accepted Answer

I think what you re trying to do is wrap loooooooooooooong words or URLs so they don t push the size of the table out    I ve just been trying to do the same thing    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 must either wrap the content in a DIV  or other block tag  or 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        Hope that helps somebody

User · Answer

You could put the text into a div  or other container  with a width of 50    http   jsfiddle net 6gjsd

User · Answer

It s hard to answer you without the HTML  but in general you can put   style  width  50      On either the table cell  or place a div inside the table cell  and put the style on that   But one problem is  50  of what   It s 50  of the parent element which may not be what you want   Post a copy of your HTML and maybe you ll get a better answer

User · Answer

I suggest you use a wrapper div or paragraph    lt td gt  lt p style  width 50    gt Text only allowed to extend 50  of the cell  lt  p gt  lt  td gt    And you can make a class out of it    lt td class  linebreak  gt  lt p gt Text only allowed to extend 50  of the cell  lt  p gt  lt  td gt   td linebreak p       width  50       All of this assuming that you meant 50  as in 50  of the cell

User · Answer

Try using    lt table  border  1  cellspacing  0  cellpadding  0  class  template-table   style  table-layout  fixed  width  100   gt     as table style along with   lt td style  word-break break-word  gt long text lt  td gt    for td it works for normal real scenario text with words  not for random typed letters without gaps

[html] force line break in html table cell

Examples related to html

Examples related to css