How to force table cell <td> content to wrap?

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.)


td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}

Its works for me.

<style type="text/css">

 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%
}


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

See this example:

<html>
<head>
   <style>
   table {border-collapse:collapse; table-layout:fixed; width:310px;}
   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
   </style>
</head>

<body>
   <table>
      <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>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.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>
   </table>
</body>
</html>

DEMO:

table {border-collapse:collapse; table-layout:fixed; width:310px;}
       table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
       <table>
          <tr>
             <td>1</td>
             <td>Lorem Ipsum</td>
             <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
          </tr>
          <tr>
             <td>2</td>
             <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
             <td>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.</td>
          </tr>
          <tr>
             <td>3</td>
             <td></td>
             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
          </tr>
       </table>

Tags:

Html

Css

Html Table

Recent Posts