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

达夫特

我具有以下DOM结构:

JSFiddle演示

    <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%吗?

目前看来它对我不起作用,任何建议都将不胜感激。

艾文·拉吉(Ivin Raj)

您可以尝试他的:

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

在这里演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将高度设置为宽度的百分比?

来自分类Dev

PagedList.Mvc省略号按钮不起作用

来自分类Dev

CSS中的百分比宽度不起作用

来自分类Dev

将片段宽度设置为屏幕宽度的百分比

来自分类Dev

Xamarin Forms StackLayout:如何将子级的宽度/高度设置为百分比

来自分类Dev

填充顶部占宽度百分比不起作用

来自分类Dev

如何将最大宽度设置为百分比AND像素?

来自分类Dev

CSS省略号在Bootstrap 3缩略图标题中不起作用

来自分类Dev

省略号不起作用

来自分类Dev

文字溢出省略号不起作用

来自分类Dev

Div容器高度百分比不起作用

来自分类Dev

CSS文本溢出:在Angular 8中使用CSS网格时省略号不起作用

来自分类Dev

为什么CSS中的td宽度百分比似乎不起作用?

来自分类Dev

CSS文字溢出:省略号在V-chip上不起作用

来自分类Dev

反应-添加省略号字符不起作用

来自分类Dev

省略号百分比

来自分类Dev

将高度设置为宽度的百分比?

来自分类Dev

CSS高度百分比在Android应用程序屏幕中不起作用

来自分类Dev

身高百分比在CSS中不起作用

来自分类Dev

百分比在CSS中不起作用

来自分类Dev

Firefox的背景位置百分比不起作用

来自分类Dev

将片段宽度设置为屏幕宽度的百分比

来自分类Dev

CSS省略号在Bootstrap 3缩略图标头中不起作用

来自分类Dev

<div>身高百分比不起作用

来自分类Dev

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

来自分类Dev

百分比不起作用的Gluon Mobile GridPane

来自分类Dev

Div容器高度百分比不起作用

来自分类Dev

用百分比增加宽度时覆盖不起作用

来自分类Dev

css。文本溢出不起作用:省略号

Related 相关文章

热门标签

归档