具有溢出省略号的相等但动态大小的列
Equal but dynamically-sized columns with overflow ellipsis
我从四等列开始 div,它允许单行在太长时省略。我有两种方法可以做到这一点,第一种使用 table 布局:
div.outer {
display: table;
table-layout: fixed;
width: 100%;
}
div.outer > div {
width: 25%;
display: table-cell;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="outer">
<div style="background-color: tan">Some text</div>
<div style="background-color: gold">Some significantly longer text which is almost certainly going to overflow at some point, and which probably should be some lorem ipsum instead.</div>
<div style="background-color: tan">More text.</div>
<div style="background-color: gold">Yet more text.</div>
</div>
然后使用 flexbox:
div.outer {
display: flex;
}
div.outer > div {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="outer">
<div style="background-color: tan">Some text</div>
<div style="background-color: gold">Some significantly longer text which is almost certainly going to overflow at some point, and which probably should be some lorem ipsum instead.</div>
<div style="background-color: tan">More text.</div>
<div style="background-color: gold">Yet more text.</div>
</div>
在 table 实例中,当外部 div 指定了宽度时,这很好用。但是每当宽度被移除时,相等的列大小调整就会失败,并且 - 可以说更糟 - 溢出不会用省略号修剪。
在 flexbox 选项中,它默认为全宽。更改为 display: inline-flex
会使 table 变窄,但会用省略号不必要地切断文本。
如何以较小的尺寸开始 table(以适合内容),随着内容的增加以相同的方式扩展,然后在外部 div 达到 100 时省略任何溢出文本% 宽度? (注意这个宽度不是固定值。)
这里的其他答案解释了像上面这样设置各种值会正确省略,但如果可能的话,不要回答如何以较小的 table 大小开始的问题。
CSS 网格可能会在这里做得更好:
div.outer {
display: inline-grid; /* fit content */
grid-auto-flow:column;
grid-auto-columns:1fr; /* equal column */
max-width:100%; /* don't go beyond full width */
margin:10px;
}
div.outer > div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="outer">
<div style="background-color: tan">Some text</div>
<div style="background-color: gold">Some significantly longer text which is almost certainly going to overflow at some point, and which probably should be some lorem ipsum instead.</div>
<div style="background-color: tan">More text.</div>
<div style="background-color: gold">Yet more text.</div>
</div>
<div class="outer">
<div style="background-color: tan">Some text</div>
<div style="background-color: gold">Some significantly</div>
<div style="background-color: tan">More text.</div>
<div style="background-color: gold">Yet more text.</div>
</div>
我从四等列开始 div,它允许单行在太长时省略。我有两种方法可以做到这一点,第一种使用 table 布局:
div.outer {
display: table;
table-layout: fixed;
width: 100%;
}
div.outer > div {
width: 25%;
display: table-cell;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="outer">
<div style="background-color: tan">Some text</div>
<div style="background-color: gold">Some significantly longer text which is almost certainly going to overflow at some point, and which probably should be some lorem ipsum instead.</div>
<div style="background-color: tan">More text.</div>
<div style="background-color: gold">Yet more text.</div>
</div>
然后使用 flexbox:
div.outer {
display: flex;
}
div.outer > div {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="outer">
<div style="background-color: tan">Some text</div>
<div style="background-color: gold">Some significantly longer text which is almost certainly going to overflow at some point, and which probably should be some lorem ipsum instead.</div>
<div style="background-color: tan">More text.</div>
<div style="background-color: gold">Yet more text.</div>
</div>
在 table 实例中,当外部 div 指定了宽度时,这很好用。但是每当宽度被移除时,相等的列大小调整就会失败,并且 - 可以说更糟 - 溢出不会用省略号修剪。
在 flexbox 选项中,它默认为全宽。更改为 display: inline-flex
会使 table 变窄,但会用省略号不必要地切断文本。
如何以较小的尺寸开始 table(以适合内容),随着内容的增加以相同的方式扩展,然后在外部 div 达到 100 时省略任何溢出文本% 宽度? (注意这个宽度不是固定值。)
这里的其他答案解释了像上面这样设置各种值会正确省略,但如果可能的话,不要回答如何以较小的 table 大小开始的问题。
CSS 网格可能会在这里做得更好:
div.outer {
display: inline-grid; /* fit content */
grid-auto-flow:column;
grid-auto-columns:1fr; /* equal column */
max-width:100%; /* don't go beyond full width */
margin:10px;
}
div.outer > div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="outer">
<div style="background-color: tan">Some text</div>
<div style="background-color: gold">Some significantly longer text which is almost certainly going to overflow at some point, and which probably should be some lorem ipsum instead.</div>
<div style="background-color: tan">More text.</div>
<div style="background-color: gold">Yet more text.</div>
</div>
<div class="outer">
<div style="background-color: tan">Some text</div>
<div style="background-color: gold">Some significantly</div>
<div style="background-color: tan">More text.</div>
<div style="background-color: gold">Yet more text.</div>
</div>