我無法讓長字串文本換行和/或顯示省略號。它有點像一個表格，但實際上它是 2 列帶行。
我試過搞亂類.line-flex和.long-text-maybe類，但沒有成功。
Grid 包裝器和 Flex 內容之間是否存在某種沖突？
.box {
width: 50%;
}
.gridwrapp {
display: grid;
grid-gap: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.line-flex {
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<div class="box">
<div class="gridwrapp">
<div class="line-flex">
<p>Reservation ID: </p>
<p class="long-text-maybe">982398</p>
</div>
<div class="line-flex">
<p>Item Name: </p>
<a href="/items/342342">2020 Ram Promaster 1500 HR 136 WB Custom</a>
</div>
<div class="line-flex">
<p>Name: </p>
<p class="long-text-maybe">Kim Bob</p>
</div>
<div class="line-flex">
<p>Location: </p>
<p class="long-text-maybe">Really long name in a place far far away</p>
</div>
</div>
</div>uj5u.com熱心網友回復：
您必須直接呼叫包含文本元素的子元素ellipsis才能生效。查看我所做的 CSS 更改。
.box {
width: 50%;
}
.gridwrapp {
display: grid;
grid-gap: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.line-flex {
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.line-flex > p, a {
text-overflow: ellipsis;
overflow: hidden;
}<div class="box">
<div class="gridwrapp">
<div class="line-flex">
<p>Reservation ID: </p>
<p class="long-text-maybe">982398</p>
</div>
<div class="line-flex">
<p>Item Name: </p>
<a href="/items/342342">2020 Ram Promaster 1500 HR 136 WB Custom</a>
</div>
<div class="line-flex">
<p>Name: </p>
<p class="long-text-maybe">Kim Bob</p>
</div>
<div class="line-flex">
<p>Location: </p>
<p class="long-text-maybe">Really long name in a place far far away</p>
</div>
</div>
</div>您將不得不使用flex-wrap: wrap;來讓您的文本自動換行。這包括洗掉white-space: nowrap;您的line-flex以便文本可以換行。
看這里：
顯示代碼片段
.box {
width: 50%;
}
.gridwrapp {
display: grid;
grid-gap: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.line-flex {
display: flex;
align-items: center;
overflow: hidden;
flex-wrap: wrap;
}<div class="box">
<div class="gridwrapp">
<div class="line-flex">
<p>Reservation ID: </p>
<p class="long-text-maybe">982398</p>
</div>
<div class="line-flex">
<p>Item Name: </p>
<a href="/items/342342">2020 Ram Promaster 1500 HR 136 WB Custom</a>
</div>
<div class="line-flex">
<p>Name: </p>
<p class="long-text-maybe">Kim Bob</p>
</div>
<div class="line-flex">
<p>Location: </p>
<p class="long-text-maybe">Really long name in a place far far away</p>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381197.html
標籤：css
上一篇：如何去除切片影像之間的間距？