Question

我想创建类似这个截图的内容：

当数字和文本是表格单元格并且圆圈是绝对位置时，我尝试使用表格显示，但似乎我不能在表格单元格上使用省略号。

我的设计很敏感，因此我无法使用固定宽度。

<div class="wrapper">
    <div class="cell cell1">
        1
    </div>
    <div class="cell cell2">
        very very long text that will need to be nowrap and with ellipsis very very long text that will need to be nowrap and with ellipsis
        very very long text that will need to be nowrap and with ellipsis
        very very long text that will need to be nowrap and with ellipsis
    </div>
    <div class="cell3">
        absolute 
    </div>
</div>

.wrapper{
    display: table;
    width: 100%;
}
.cell{
    display: table-cell;
}
.cell1{
    background: yellow;
}
.cell2{
    background: lightblue;
}

Answer 1

因为CSS省略号通常只适用于已知的宽度容器，或者在固定的表格布局中，我将中间单元格包装成一些div来为它创建另一个内部表格，所以它都响应。

要创建多行，您需要另一个div容器并设置为display: table-row;

jsfiddle

＆＃13;

.wrapper {
    display: table;
    border-collapse: collapse;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
    border: 1px solid red;
}
.cell2 .content {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.cell2 .content .ellipsis {
    display: table-cell;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

＆＃13;

<div class="wrapper">
    <div class="row">
        <div class="cell cell1">1</div>
        <div class="cell cell2">
            <div class="content">
                <div class="ellipsis">very very long text that will need to be nowrap and with ellipsis very very long text that will need to be nowrap and with ellipsis very very long text that will need to be nowrap and with ellipsis very very long text that will need to be nowrap and with ellipsis</div>
            </div>
        </div>
        <div class="cell cell3">circle</div>
    </div>
    <div class="row">
        <div class="cell cell1">2</div>
        <div class="cell cell2">
            <div class="content">
                <div class="ellipsis">very very long text that will need to be nowrap and with ellipsis very very long text that will need to be nowrap and with ellipsis very very long text that will need to be nowrap and with ellipsis very very long text that will need to be nowrap and with ellipsis</div>
            </div>
        </div>
        <div class="cell cell3">circle</div>
    </div>
</div>

＆＃13;

Answer 2

我希望这是你想要的

我已经添加了这个CSS -

.cell3 {
    height: 0;
    padding-bottom: 100%;
    background-color: red;
    border-radius: 50%;
}

这是小提琴的link

提示：有更好的方法来实现您想要实现的目标

如何在响应式CSS表格单元格中使用省略号？

2 个答案: