Flexbox 容器內的空白 nowrap 文字溢出了頁面。
我似乎在 CSS 佈局中遇到了一個奇怪的邊緣情況。
我有一個表格，在一列中我有一個包含兩列的彈性容器。第一列包含一個選擇，第二個文字需要保留在一行中，如果太長則以省略號結尾（文字是動態的）
需要明確的是，我無法控製表格 html。只有在列內，我才能新增 HTML。
彈性盒內的文字溢出似乎是一個常見問題，但其所有正常解決方案在我的情況下都不起作用。我嘗試過的：
這就是我在許多不同的 stackoverflow 文章中找到的所有解決方案，但對我來說，沒有任何效果。如果彈性容器位於表格之外，那麼一切都可以正常工作，但同樣，這對我來說不是一個選擇。
這將清楚地表明我的意思：
.container {
display: flex;
min-width: 0;
width: 100%;
column-gap: 3rem;
}
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<!-- Works perfectly (just a test)-->
<b>This is what i need:</b>
<div class='container'>
<div class='child select'>
<select>
<option>Option 1 is a long option</option>
<option>Option 2 is shorter</option>
</select>
</div>
<div class='child text'>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
</div>
<br><br>
<!-- Overflows page (this needs to actually work) -->
<b>This is where it needs to work (inside table):</b>
<table>
<tbody>
<tr>
<th scope="row">
<label for="select-id">Description field</label>
</th>
<td>
<div class='container'>
<div class='child select'>
<select id='select-id'>
<option>Option 1 is a long option</option>
<option>Option 2 is shorter</option>
</select>
</div>
<div class='child text'>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
</div>
</td>
</tr>
</tbody>
</table>
我同意該解決方案僅適用於最新的瀏覽器，或即使需要特定的瀏覽器。
P粉9086436112024-03-29 19:35:29
您可以透過使用 vw 單元將寬度指派給 .text 來解決此問題。
例如，當我簡單地將 width: 50vw; 新增到 .text 時會發生這種情況
.container {
display: flex;
min-width: 0;
width: 100%;
column-gap: 3rem;
}
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 50vw;
}
This is what i need:Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
This is where it needs to work (inside table):
|
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粉7152740522024-03-29 13:28:28
預設情況下，表格寬度將根據其內容進行調整。您必須使用 table-layout 更新演算法：fixed ; 並新增 width: 100%; 來限制其寬度：
.container {
display: flex;
min-width: 0;
width: 100%;
column-gap: 3rem;
}
table {
table-layout: fixed;
width: 100%;
}
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
This is what i need:Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
This is where it needs to work (inside table):
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|