Menggunakan lajur jadual kosong dalam Flexbox: nowrap

Question

Teks nowrap kosong di dalam bekas Flexbox melimpahi halaman.

Saya nampaknya menghadapi masalah kelebihan yang pelik dalam reka letak CSS.

Saya mempunyai jadual dan dalam satu lajur saya mempunyai bekas fleksibel dengan dua lajur. Lajur pertama mengandungi pilihan, teks kedua perlu kekal dalam satu baris dan berakhir dengan elipsis jika terlalu panjang (teks adalah dinamik)

Untuk menjadi jelas, saya tidak mempunyai kawalan ke atas html jadual. Hanya dalam lajur saya boleh menambah HTML.

Limpahan teks di dalam flexbox nampaknya masalah biasa, tetapi semua penyelesaian biasanya tidak berfungsi dalam kes saya. Apa yang saya dah cuba:

• Tambahkan lebar min: 0;
Tambah pengecutan anjal: 0; flexbox dengan teks
Tambah pertumbuhan anjal: 1; gunakan pilih untuk mengembangkan kotak
Banyak barangan yang lebih kecil (lebar bekas 100%, dll.)

Ini adalah semua penyelesaian yang saya temui dalam banyak artikel stackoverflow yang berbeza, tetapi bagi saya, tiada apa yang berhasil. Jika bekas flex berada di luar meja maka semuanya berfungsi dengan baik, tetapi sekali lagi, itu bukan pilihan untuk saya.

Ini akan menjelaskan maksud saya:

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

Saya bersetuju bahawa penyelesaian ini hanya berfungsi dengan penyemak imbas terkini, atau walaupun penyemak imbas tertentu diperlukan.

Answer 1

Anda boleh menyelesaikan masalah ini dengan menggunakan vw 单元将宽度分配给 .text.

Sebagai contoh, ini berlaku apabila saya hanya menggantikan width: 50vw; 添加到 .text dengan

.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

Secara lalai, lebar jadual akan dilaraskan berdasarkan kandungannya. Anda perlu menggunakan table-layout 更新算法：fixed ; 并添加 width: 100%; untuk mengehadkan lebarnya:

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