How to force table cell 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, d         


        

Answer 1

Use table-layout:fixed in the table and word-wrap:break-word in the td.

See this example:

   



   

      

         
1
         
Lorem Ipsum
         
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      
      

         
2
         
LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown
         
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.
      
      

         
3
         

         
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...
      
   

DEMO:

table {border-collapse:collapse; table-layout:fixed; width:310px;}
       table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}

       

          

             
1
             
Lorem Ipsum
             
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          
          

             
2
             
LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown
             
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.
          
          

             
3
             

             
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...