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.
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?
<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>
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.
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.
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.
Syntax: white-space: normal|nowrap|pre|pre-wrap|pre-line; Example 1: This example uses white-space property to prevent cell wrapping using CSS.
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
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With