html - CSS：在 HTML 表格中，自动换行不适用于浮动：左

Question

我有一个三列表格，我想根据内容的长度在单元格中设置文本背景。但是当我设置 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>

如果我删除 float:left;，背景将与内容的长度不匹配，但自动换行确实有效。如何修改我的 CSS？

Answer 1

添加显示：内联；

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