在CSS中用省略号截断文本(嵌套的div，而不是HTML表)

Question

我有一个固定宽度的"表"。该表有一个"标题"和一个或多个"行"。每行包含两个"单元格"，一个标签和一个值。

注意：在这种情况下，我实际上并没有使用table。上面的那些表、行等引用实际上是具有适当display: table-*样式的div。

我希望第一列单元格（标签）的大小自然（当它们太宽时，我可以根据需要修改文本）。并且，我希望第二列单元格不要超过"table"的宽度。也就是说，如果单元格的值太长，我希望用省略号截断它。

Fiddle

这把小提琴感觉很近，但有什么东西在躲避我。我该如何修复我的CSS，使绿色值不会超过预期的宽度？

body {
    font-family: Calibri;
}
.expectedWidth {
    width: 300px;
}
.header {
    max-width: 300px;
    background-color: yellow;
    margin-bottom: 4px;
    border-left: 1px dotted red;
    border-right: 1px dotted red;
    text-align: center;
}
.cardlist {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.card {
    border-spacing: 0px;
    padding: 0px;
    display: table;
}
.caption {
    text-align: left;
    background-color: lightgrey;
    display: table-caption;
    width: 100%;
}
.tbody {
    display: table-row-group;
}
.row {
    background-color: grey;
    display: table-row;
}
.cell {
    display: table-cell;
}
.cell.col1 {
    background-color: lightblue;
    padding-right: 4px;
}
.cell.col2 {
    background-color: lightgreen;
}

<div class="header expectedWidth">This is the expected width.</div>
<div class="cardlist">
    <div class="card expectedWidth">
        <div class="caption">This table should be the expected width.</div>
        <div class="tbody">
            <div class="row">
                <div class="cell col1">Subject:</div>
                <div class="cell col2">Some long value that should be truncated at the expected width.</div>
            </div>
            <div class="row">
                <div class="cell col1">Probability:</div>
                <div class="cell col2">50%</div>
            </div>
            <div class="row">
                <div class="cell col1">Elvis:</div>
                <div class="cell col2">Presley</div>
            </div>
            <div class="row">
                <div class="cell col1">42:</div>
                <div class="cell col2">The answer to life, the universe and everything</div>
            </div>
        </div>
    </div>
</div>

Answer 1

要实现此功能，请应用

table-layout: fixed

到表级div和

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

到需要截断的单元格。以下是对原问题的修改：

body {
    font-family: Calibri;
}
.expectedWidth {
    width: 300px;
}
.card {
    display: table;
    table-layout: fixed;
}
.truncated {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.caption {
    background-color: cornflowerblue;
    font-weight: bold;
    display: table-caption;
}
.tbody {
    display: table-row-group;
}
.row {
    background-color: grey;
    display: table-row;
}
.cell {
    display: table-cell;
}
.cell.col1 {
    background-color: lightblue;
    width: 30%;
}
.cell.col2 {
    background-color: lightgreen;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

<img src="http://placehold.it/300x16/eeee22/000000&text=This+is+the+expected+width" />
<div class="card expectedWidth">
    <div class="caption expectedWidth truncated">This caption is too long but should be the expected width.</div>
    <div class="tbody">
        <div class="row">
            <div class="cell col1">Subject:</div>
            <div class="cell col2">Some long value that should be truncated at the expected width.</div>
        </div>
        <div class="row">
            <div class="cell col1">Probability:</div>
            <div class="cell col2">50%</div>
        </div>
        <div class="row">
            <div class="cell col1">Elvis:</div>
            <div class="cell col2">Presley</div>
        </div>
        <div class="row">
            <div class="cell col1">42:</div>
            <div class="cell col2">The answer to life, the universe and everything</div>
        </div>
    </div>
</div>

这个答案是从这个问题的解决方案中得出的。

Answer 2

display:table-cell不适用于text-overflow: ellipsis。参见此处讨论

考虑将布局更改为使用带宽度或百分比的display:inline-block（这是纯css省略号的要求）来实现您的目标。从技术上讲，无论如何，这可能是一种语义更正确的方法，尽管表单元格布局的使用非常广泛。。。