0

I have a three column table and I want to set a text background in the cell basing on the length of the content. But when I set float: left, word-wrap doesn't work well.

table {
table-layout: fixed;
width: 100%;
word-wrap: break-word;
}

This is the content in each cell.

.read{
    min-height: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: 0px 10px 0px 10px;
    border-radius: 4px;
    background-image: -webkit-gradient(linear, 25% 0%, 25% 100%, from(rgba(142, 175, 196, 1.0)), to(rgba(118, 146, 164, 1.0)));
    float:left;
}

<table>
    <tr>
        <td width="36px">..</td>
        <td>
            <div class="read">
            looooooooooooooooooooooooooooooooooooooooooooooooooooooooooog
            </div>
        </td>
    </tr>
</table>

If I remove float:left;, the background won't match the length of the content but word-wrap does work. How could I modify my CSS?

Tim Fan
  • 5
  • 3

1 Answers1

1

add display:inline;

 .read{
        min-height: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 10px;
        padding: 0px 10px 0px 10px;
        border-radius: 4px;
        background-image: -webkit-gradient(linear, 25% 0%, 25% 100%, from(rgba(142, 175, 196, 1.0)), to(rgba(118, 146, 164, 1.0)));
        **display:inline;**
    }
priyanka77
  • 46
  • 3
  • yes, this makes the content wrap, but the background appears behind the content line by line instead of the whole block. I'm trying to solve this..thank you! – Tim Fan Jul 30 '12 at 02:43
  • hmm I am interested in why this works. As far as I can remember, inline elements needs to have width set in order for it to word-wrap? – lulalala Jul 15 '15 at 03:12