Word-wrap CSS property not affecting a table cell

Question

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 )

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:

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.

Can you please post the original code here or in a JSfiddle so that this question is useful to other people, once you've fixed the original page? — KatieK, Oct 02 '12 at 17:23
What sort of "elegant solution" are you looking for? `text-overflow: ellipsis` or a jquery show/hide? — Scrimothy, Oct 02 '12 at 20:36
@Scrimothy One in which I don't have to use `table-layout:fixed;` for the table, or `word-break: break-word;` on a particular table cell. — its_me, Oct 03 '12 at 01:47

j08691 · Accepted Answer · 2013-06-28T18:35:42.560

14

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

edited Jun 28 '13 at 18:35

answered Oct 02 '12 at 17:12

j08691

204,283
31
260
272

7

By the way, I ended up using this: `table { table-layout:fixed; word-break:break-all; word-wrap:break-word; }` – its_me Oct 02 '12 at 17:54

PJ McCormick · Answer 2 · 2012-10-02T17:21:52.897

5

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

edited Oct 02 '12 at 17:21

answered Oct 02 '12 at 17:13

PJ McCormick

1,903
14
12

`word-break: break-word;` breaks every word in the table - I've tried it already. – its_me Oct 02 '12 at 17:15
Can you edit the table's HTML? You could create a .break-word class and just add it to the offending td. – PJ McCormick Oct 02 '12 at 17:18

score 5 · Answer 3 · answered Sep 23 '15 at 12:51

5

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

answered Sep 23 '15 at 12:51

Kristof O

51
1
1

Had to add it to what element with what selector? You could improve your answer by adding the complete changes necessary. – dakab Sep 23 '15 at 13:11
This was so on point for me - `break-word` wasn't working due to bootstrap table styles – Katstevens Aug 29 '16 at 06:30
Thanks! This is the only solution that worked for me. I added it to my code as: `.mdl-data-table { white-space: normal; /* else no automatic word wrapping possible */ }` – user3069376 Mar 13 '17 at 10:16
The white-space change is what fixed it for me. – dgundersen Aug 25 '17 at 17:32

score 0 · Answer 4 · answered Oct 02 '12 at 17:22

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

Word-wrap CSS property not affecting a table cell

( HERE'S THE LIVE EXAMPLE )

THE CODE

CSS

4 Answers4

Linked