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

Question

我有以下 DOM 结构:

JSFiddle demo

    <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 标记中有大量文本，该表格就会超出我的页面。

我必须将表格保持在宽度: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