Question

我有以下DOM结构：

    <table class="tbl">
        <tr>
            <th>
                <td>
                    <div>
                        <span>
                            A lot of text in hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                        </span>
                    </div>
                </td>
                <td>
                    <div>
                        <span>
                            A lot of text in hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                        </span>
                    </div>
                </td>
            </th>
        </tr>
    </table>

    table.tbl{
        background-color: #FFF;
        border: 1px solid #000;
        border-collapse: separate;
        border-radius: 5px;
        float: left;
        margin: 10px 0;
        width: 100%;
    }

    table.tbl tr {
        font-weight: 400;
        text-align: left;
    }

    table.tbl th {
        color: #FFF;
        font-weight: 400;
        padding: 6px;
        text-align: left;
    }

    table.tbl td {
        padding: 10px 8px;
    }

    table.tbl div {
        max-width: 100%;
        display: inline-flex;
    }

    table.tbl span {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

此表位于我页面的右侧，但如果一个或两个span标记中有大量文本，则表格扩展到我的页面之外。

我必须将表保留在width: 100%，因为它需要填充页面右侧的所有可用空间。

我可以在span标记中添加CSS省略号，但是将表的整体宽度保持为width: 100%吗？

目前似乎并不适合我，任何建议或意见都将不胜感激。

Answer 1

你可以尝试一下：

table.tbl{
            background-color: #FFF;
            border: 1px solid #000;
            border-collapse: separate;
            border-radius: 5px;
            float: left;
            margin: 10px 0;
            width: 100%; 
            table-layout: fixed;
        }

        table.tbl tr {
            font-weight: 400;
            text-align: left;
        }

        table.tbl th {
            color: #FFF;
            font-weight: 400;
            padding: 6px;
            text-align: left;
        }

        table.tbl td {
            padding: 10px 8px;
        }

        table.tbl div {
            max-width: 100%;
            display: inline-flex;
        }

        table.tbl span {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

DEMO HERE

宽度设置为百分比时，CSS省略号不起作用

1 个答案: