Verwendung leerer Tabellenspalten in Flexbox: nowrap

Question

Leerer Nowrap-Text im Flexbox-Container läuft über die Seite hinaus.

Ich scheine im CSS-Layout auf einen seltsamen Randfall zu stoßen.

Ich habe eine Tabelle und in einer Spalte habe ich einen Flexcontainer mit zwei Spalten. Die erste Spalte enthält eine Auswahl, der zweite Text muss in einer Zeile bleiben und mit Auslassungspunkten enden, wenn er zu lang ist (der Text ist dynamisch)

Um es klarzustellen: Ich habe keine Kontrolle über den Tabellen-HTML. Nur innerhalb von Spalten kann ich HTML hinzufügen.

Textüberlauf in der Flexbox scheint ein häufiges Problem zu sein, aber alle normalen Lösungen haben in meinem Fall nicht funktioniert. Was ich versucht habe:

• Mindestbreite hinzufügen: 0; Flex-Container
• Elastisches Schrumpfen hinzufügen: 0; Flexbox mit Text
• Elastisches Wachstum hinzufügen: 1; verwenden Sie „Auswählen“, um das Feld zu erweitern
• Viele kleinere Sachen (Behälterbreite 100% usw.)

Das sind alle Lösungen, die ich in vielen verschiedenen Stackoverflow-Artikeln gefunden habe, aber bei mir hat nichts funktioniert. Wenn sich der Flex-Container außerhalb des Tisches befindet, funktioniert alles einwandfrei, aber auch das ist für mich keine Option.

Damit wird klar, was ich meine:

.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>

Ich stimme zu, dass diese Lösung nur mit den neuesten Browsern funktioniert oder auch dann, wenn ein bestimmter Browser erforderlich ist.

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.