CODEWITHSUNDEEP
csscss-tablesword-wrap
its_me
its_me

Reputation: 11338

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.

Upvotes: 18

Views: 29812

Answers (4)

Kristof O
Kristof O

Reputation: 51

Maybe a tip for anyone who still has problems with break-word: I had to add white-space: normal because it was set on 'nowrap'

Especially if you use bootstrap some elements like the labels have white-space: nowrap

Upvotes: 5

j08691
j08691

Reputation: 207901

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

Upvotes: 14

KatieK
KatieK

Reputation: 13853

Your text is wrapped - notice how it breaks after k=rsa; because you have a space there. But there's no space in the p= value to break on.

However, you can add a word-break: break-all; specification to that element, which might be closer to what you're looking for. See http://jsfiddle.net/zu6Eh/.

Upvotes: 0

PJ McCormick
PJ McCormick

Reputation: 1993

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

Upvotes: 5

Related Questions