CSS：在HTML表格中，word wrap不'；t与float一起工作：左

我有一个三列的表格，我想根据内容的长度在单元格中设置文本背景。但当我设置float:left时，换行符就不能正常工作

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

这是每个单元格中的内容

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

。读取{
最小高度：20px；
边缘顶部：10px；
边缘底部：10px；
左边距：10px；
填充：0px 10px 0px 10px；
边界半径：4px；
背景图像：-webkit渐变（线性，25%0%，25%100%，从（rgba（1421751961.0））到（rgba（11814641.0）））；
浮动：左；
}
..
呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜

如果我移除float:left；，背景与内容的长度不匹配，但word wrap确实有效。

---

如何修改CSS？

添加显示：内联

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

---

你能尝试添加显示：内联块；到您的.read类？共享您的标记please@Anpel显示：内联块的工作原理与css中的float:left相同。是的，这会使内容换行，但背景会逐行显示在内容后面，而不是整个块。我正在努力解决这个问题……谢谢！嗯，我很感兴趣的是为什么这样做。据我所知，内联元素需要设置宽度才能进行换行？