Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Word-wrap CSS property not affecting a table cell

I have one long word...

p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCx+wnDhlr7GqHiH6lAaPPuN5F7RjUrtvGyxxZkClJsLaTDeqg/FuJXU7RYdPQ2Ka++tfw0Z9+SRKatLUQQeCqLK8z1/V4p7BaJKPkegMzXgWGnFVmz1tdLFiYUGq0MvVgqWiepcTFmwgSd9g1pGRiCSDHJUDwcc+NidiW4/ixw4QIDAQAB"

...that I am trying to fit in a table cell (<td>), for which I've tried using word-wrap: break-word; and the like to force the text to wrap, but none of them seem to have any affect on the text.

( HERE'S THE LIVE EXAMPLE )

Screenshot - Click To Enlarge!
Click on the image to enlarge!

The text goes on and on horizontally, and doesn't wrap. Which CSS property am I supposed to be using here?


THE CODE

<table>
     <thead>
          <tr>
                <th>Name
                </th><th>Type
                </th><th>Value
                </th><th>TTL
          </th></tr>
     </thead>
     <tbody>
          <tr>
                <td>wtnmail._domainkey.whatthenerd.com.</td>
                <td>TXT</td>
                <td>"v=DKIM1; k=rsa; p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCx+wnDhlr7GqHiH6lAaPPuN5F7RjUrtvGyxxZkClJsLaTDeqg/FuJXU7RYdPQ2Ka++tfw0Z9+SRKatLUQQeCqLK8z1/V4p7BaJKPkegMzXgWGnFVmz1tdLFiYUGq0MvVgqWiepcTFmwgSd9g1pGRiCSDHJUDwcc+NidiW4/ixw4QIDAQAB"</td>
                <td>300</td>
          </tr>
     </tbody>
</table>

CSS

Based on j08691's answer, I am using this now:

table {
   table-layout: fixed;
   word-break: break-all;
   word-wrap: break-word;
}

And that's resulted in this:

Screenshot - Click To Enlarge!
Click on the image to enlarge!

Yes, the table isn't super stylish as it used to be, but now I can at least be sure that the data shows (even when the browser is resized i.e. smaller resolutions).

Still looking for an elegant solution, if any.

like image 365
its_me Avatar asked Oct 02 '12 17:10

its_me


People also ask

How do you force a table cell to wrap it?

There are two methods to wrap table cell <td> content using CSS which are given below: Using word-wrap property: This property is used to allow long words to break and wrap onto the next line. Using word-break property: This property is used to specify how to break the word when the word reached at end of the line.

Does Wordwrap work in a table?

You can wrap the text to the column width by any of the following methods: ◦ On the Table tab, in the Format group, click Wrap Text. ◦ Right-click and click Wrap Text on the shortcut menu. ◦ On the Table tab, click Height and Width.

How do you stop a cell from wrapping in a table?

Syntax: white-space: normal|nowrap|pre|pre-wrap|pre-line; Example 1: This example uses white-space property to prevent cell wrapping using CSS.


2 Answers

In addition to your word-wrap rule on the cell, add the CSS rule table-layout:fixed to your table (and possibly a width).

jsFiddle example

like image 86
j08691 Avatar answered Oct 01 '22 07:10

j08691


word-break: break-word; worked for me on .entry-content table td while editing in Chrome's Inspector.

To apply it only to offending td cells, you could create a specific class and add it to the td's HTML:

.break-word {
    word-break: break-word; 
}
like image 26
PJ McCormick Avatar answered Oct 01 '22 08:10

PJ McCormick