使用空白的表格列內的 Flexbox：nowrap

Question

Flexbox 容器內的空白 nowrap 文字溢出了頁面。

我似乎在 CSS 佈局中遇到了一個奇怪的邊緣情況。

我有一個表格，在一列中我有一個包含兩列的彈性容器。第一列包含一個選擇，第二個文字需要保留在一行中，如果太長則以省略號結尾（文字是動態的）

需要明確的是，我無法控製表格 html。只有在列內，我才能新增 HTML。

彈性盒內的文字溢出似乎是一個常見問題，但其所有正常解決方案在我的情況下都不起作用。我嘗試過的：

• 新增最小寬度：0；彈性容器
• 新增彈性收縮：0；帶有文字的彈性框
• 新增彈性成長：1；使用 select 來伸縮框
• 許多較小的東西（容器寬度為 100% 等）

這就是我在許多不同的 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>

我同意該解決方案僅適用於最新的瀏覽器，或即使需要特定的瀏覽器。

Answer 1

您可以透過使用 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:

  

    
      Option 1 is a long option
      Option 2 is shorter
    
  
  

    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):

Description field	Option 1 is a long option Option 2 is shorter Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Answer 2

預設情況下，表格寬度將根據其內容進行調整。您必須使用 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:

  

    
      Option 1 is a long option
      Option 2 is shorter
    
  
  

    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):

Description field	Option 1 is a long option Option 2 is shorter Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.