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

I am trying to create an CSS-Table (width 100%) with 2 columns. The first column has a fixed width (for example 180px) the second column should fill the rest of the width.

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

Inside the second column, there is a long text (inside a <p>-Tag). Now I want to use text-overflow: ellipsis to crop the text to one row and the text should be as long as the available space.

在第二列内部，有一个长文本（在

-Tag内）。现在我想使用文本溢出：省略号将文本裁剪为一行，文本应该与可用空间一样长。

Thats what I ve tried:

这就是我尝试过的：

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

And the following CSS code:

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

2 个解决方案

#1

table formating display let basicly element to shrink/expand according to te content it holds, so height and width works like min-height and min-width.

表格形成显示允许基本元素根据其保持的te内容进行缩小/扩展，因此高度和宽度的工作方式类似于最小高度和最小宽度。

table-layout:fixed; can force width on such display to act as width, height will keep expand anyhow.

表格的布局：固定;可以在这样的显示器上强制宽度作为宽度，高度无论如何都会保持扩展。

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

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

#2

The problem is that card-r doesn't have any width constraint. For text-overflow: ellipsis to work there must be a width consstraint on the container

问题是card-r没有任何宽度约束。对于文本溢出：要使用省略号，容器上必须有宽度约束

Rather than setting card-i to display: table-cell try setting both card-i and card-r to display: block and using calc to calculate the width the right div needs to be. Then the text-overflow should work.

而不是设置card-i来显示：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

这是一个演示

#1