Question

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

然而似乎没有应用宽度。请在行动中看到这一点：

此处复制代码：

编辑：在所有行周围添加了标题和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;
}

请建议。感谢。

Answer 1

您需要将table-layout:fixed;和width:100%;添加到表格CSS：

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

<强> jsFiddle example

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以将其设置为特定的px宽度：

.cell { max-width: 20px; } //Hard-coded width

Answer 3

我想知道你是否可以不使用display:table-cell

我试过这个似乎有效

.cell {
    display:inline-block;
    width: 20% !important;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;

}

使用div的表不适用宽度或文本省略号

3 个答案: