Question

我正在尝试使用2列创建CSS表（宽度100％）。第一列具有固定宽度（例如180px），第二列应填充宽度的其余部分。

在第二列内，有一个长文本（在<p> - 标签内）。现在我想使用text-overflow: ellipsis将文本裁剪为一行，文本应该与可用空间一样长。

这就是我尝试过的：

<div class="container">
    <div class="card">
        <div class="card-i">
            ABCD
        </div>
        <div class="card-r">
            <strong>Some title</strong><br>

            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>  
    </div>
</div>

以下CSS代码：

// This container is just for testing
.container {
    width: 400px;
    margin-bottom: 10px;
}
.card {
    display: table;
    width: 100%;
    border: 1px solid #CCC;
}

.card-i, .card-r {
    display: table-cell;
    vertical-align: top;
    padding: 0;
    border: 1px solid #CCC;
}
.card-i {
    width: 180px;
}
.card-r {
    position: relative;
    padding: 0 15px;
}

p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
}

Answer 1

表格格式显示让基本元素根据其所包含的内容缩小/展开，因此height和width的工作方式类似于min-height和min-width。

table-layout:fixed;可以强制width display充当width，height无论如何都会继续展开。

＆＃13;

.container {
    width: 400px;
    margin-bottom: 10px;
}
.card {
    display: table;
    width: 100%;
    border: 1px solid #CCC;
  table-layout:fixed;
}

.card-i, .card-r {
    display: table-cell;
    vertical-align: top;
    padding: 0;
    border: 1px solid #CCC;
}
.card-i {
    width: 180px;
}
.card-r {
    position: relative;
    padding: 0 15px;
}

p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
}

＆＃13;

<div class="container">
    <div class="card">
        <div class="card-i">
            ABCD
        </div>
        <div class="card-r">
            <strong>Some title</strong><br>

            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>  
    </div>
</div>

＆＃13;

Answer 2

问题是card-r没有任何宽度约束。要text-overflow: ellipsis工作，必须是容器上的宽度限制

不要将card-i设置为display: table-cell，而是尝试将card-i和card-r设置为display: block并使用calc来计算右侧的宽度div需要。然后文本溢出应该工作。

.card-i, .card-r {
    float: left;
    display: block;
    vertical-align: top;
    padding: 0;
    border: 1px solid #CCC;
}
.card-i {
    width: 180px;
}
.card-r {
    position: relative;
    padding: 0 15px;
    width: calc(100% - 214px);
}

Here is a demo

text-overflow：省略号和显示表格单元格

2 个答案: