使用div的表格不适用于宽度或文字省略号

拉扎·阿里(Raza Ali)

我正在尝试创建一个简单的表,如果它超出了宽度,应该用椭圆形截断文本。

但是,似乎没有应用宽度。请查看此操作:

桌子宽度jsfiddle

还要在此处复制代码:

编辑:在所有行周围添加了标头和div包装器,这不适用于固定布局

<div>
<div class="table">
<div class="row">
    <div class="cell">
        header
    </div>
    <div class="cell">
        123
    </div>
    <div class="cell">
        456
    </div>
    <div class="cell">
        789
    </div>
    <div class="cell">
        110
    </div>        
</div>
<div>
<div class="row">
    <div class="cell">
        This is a very long line of text that should be trimmed
    </div>
    <div class="cell">
        123
    </div>
    <div class="cell">
        456
    </div>
    <div class="cell">
        789
    </div>
    <div class="cell">
        110
    </div>        
</div>
<div class="row">
    <div class="cell">
        This is a very long line of text that should be trimmed
    </div>
    <div class="cell">
        123
    </div>
    <div class="cell">
        456
    </div>
    <div class="cell">
        789
    </div>
    <div class="cell">
        110
    </div>        
</div>
</div>
</div>
</div>

的CSS

.table {
 display:table;
table-layout: fixed;
width: 100%
}

.row {
display: table-row
}

.cell {
display: table-cell;
width: 20%;
white-space: nowrap;
padding: 5px;
overflow: hidden;
text-overflow: ellipsis;
}

请提出建议。谢谢。

j08691

您需要在表CSS中添加table-layout:fixed;width:100%;

.table {
    display:table;
    table-layout:fixed;
    width:100%;
}

jsFiddle示例

.table {
    display:table;
    table-layout:fixed;
    width:100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
    width: 20%;
    white-space: nowrap;
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}
<div class="table">
    <div class="row">
        <div class="cell">This is a very long line of text that should be trimmed</div>
        <div class="cell">123</div>
        <div class="cell">456</div>
        <div class="cell">789</div>
        <div class="cell">110</div>
    </div>
    <div class="row">
        <div class="cell">This is a very long line of text that should be trimmed</div>
        <div class="cell">123</div>
        <div class="cell">456</div>
        <div class="cell">789</div>
        <div class="cell">110</div>
    </div>
</div>

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

JavaScript getElementById不适用于表格

来自分类Dev

边界不适用于Divs的“表格”

来自分类Dev

省略号不适用于长网址

来自分类Dev

TD列宽度值不适用于固定的表格布局

来自分类Dev

CSS文字省略号和100%宽度

来自分类Dev

CSS文字溢出省略号+以%表示的宽度无效

来自分类Dev

带省略号的浮动div的CSS-宽度未知

来自分类Dev

最大宽度不适用于表格单元

来自分类Dev

省略号适用于第二个跨度,但不适用于第一个

来自分类Dev

截断省略号,不带宽度

来自分类Dev

CSS省略号不适用于特定的Web字体

来自分类Dev

基于colgroup的表格单元格的宽度不适用于两个表格

来自分类Dev

热键不适用于表格加载

来自分类Dev

验证不适用于表格

来自分类Dev

分页不适用于表格概念

来自分类Dev

CSS文字溢出:省略号不取决于宽度

来自分类Dev

如何使用文字溢出:省略号?

来自分类Dev

文字宽度不适用于跨度

来自分类Dev

使用CSS在div中自动调整图像大小仅适用于宽度,不适用于高度

来自分类Dev

带省略号的浮动div的CSS-宽度未知

来自分类Dev

100%的宽度不适用于div。WordPress的

来自分类Dev

省略号适用于第二个跨度,但不适用于第一个

来自分类Dev

div容器中的表格布局和省略号

来自分类Dev

以“ 100%”宽度div显示省略号

来自分类Dev

宽度不适用于表格单元格

来自分类Dev

在表格中使用省略号

来自分类Dev

CSS:宽度属性不适用于 div 标签

来自分类Dev

为什么文本溢出:省略号不适用于 Firefox 中的 display: inline-flex?

来自分类Dev

CSS Transition 不适用于空白:nowrap 和 text-overflow:悬停时的省略号

Related 相关文章

热门标签

归档