gpt4 book ai didi

css - Flexbox 容器中的省略号

转载 作者:数据小太阳 更新时间:2023-10-29 09:11:13 24 4
gpt4 key购买 nike

<分区>

自从 Firefox Nightly (35.0a1) 的最新(?)版本以来,我一直在使用 flex-direction: row 的 flexbox 容器内遇到 text-overflow: ellipsis 的问题,每列宽度为 50%。

演示:

.container {
width: 300px;
background: red;
}

.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.column {
flex-basis: 50%;
}

.column p {
background: gold;

/* Will not work in Firefox Nightly 35.0a1 */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
<div class="container">
<div class="row">
<div class="column">
<p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p>
</div>
<div class="column">
<p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p>
</div>
</div>
</div>

在 Nightly 中,文本将泄漏到其容器之外,并且不会在末尾附加 ...。在 Chrome 和 Firefox Stable 中,它按预期工作。

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com