cari

Rumah  >  Soal Jawab  >  teks badan

Tajuk ditulis semula sebagai: menu flexbox dan jadual dengan tajuk - adakah mungkin untuk memotong tajuk berdasarkan lebar jadual?

Saya mahu mencapai sesuatu seperti ini dengan menggunakan flexbox CSS. Menu adalah lebar tetap, tetapi jadual boleh berkembang secara automatik, dan pengepala tidak boleh melebihi lebar jadual, walaupun ia panjang. Dalam erti kata lain, jadual sepatutnya boleh meregangkan bekas lajur, tetapi pengepala tidak sepatutnya. 

+----+--------+
|菜单| 标题   |
|    +--------+
|    | 表格   |
+----+--------+

Mudah untuk dilaksanakan dengan hanya satu lajur lentur. 

<html>
<style>
    td {
        font-size: 60px;
    }
    .container {
        font-size: 60px;
        background-color: yellow;
        display: flex;
        flex-direction: column;
    }
    .item1 {
        background-color: red;
        white-space: nowrap;
        overflow: hidden;
    }
    .item2 {
        background-color: blue;
    }
</style>
<body>
<div class="container">
  <div class="item1">Item 1 bla bla blaaas asd das dsa das das aaaaaaaaa</div>
  <div class="item2">
    <table>
      <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
    </table>
  </div>
</div>
</body>
</html>

Tapi bila tambah menu, semuanya tidak berfungsi dengan baik, tajuk tidak dipotong. 

<html>
<style>
    .main {
        display: flex;
    }
    .menu {
        background-color: #222222;
        width: 200px;
    }
    td {
        font-size: 60px;
    }
    .container {
        font-size: 60px;
        background-color: yellow;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .item1 {
        background-color: red;
        white-space: nowrap;
        overflow: hidden;
    }
    .item2 {
        background-color: blue;
    }
</style>
<body>
<div class="main">
  <div class="menu">
    菜单
  </div>
  <div class="container">
    <div class="item1">Item 1 bla bla blaaas asd das dsa das das aaaaaaaaa</div>
    <div class="item2">
      <table>
        <tr>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
        </tr>
      </table>
    </div>
  </div>
</div>
</body>
</html>
P粉642920522P粉642920522445 hari yang lalu424

membalas semua(1)saya akan balas

  • P粉512526720

    P粉5125267202023-09-07 00:41:19

    Jadi anda mahu elemen yang mengandungi tajuk berubah saiz dengan adik-beradiknya, tetapi bukan anak-anaknya sendiri.

    Satu-satunya cara yang boleh saya fikirkan ialah membungkus teks tajuk dalam elemen yang sesuai - dalam kes ini <span> - 然后使用position: absolute将其从流中取出，并在标题的父元素上使用position: relative. Kemudian anda perlu menetapkan beberapa ketinggian kepada tajuk.

    Contoh

    Saya menggantikan lebar dengan flex: 0 0 200px. Ini akan menghalang menu daripada menukar saiz, sentiasa kekal pada 200px. 

    .main {
  display: flex;
}

.menu {
  background-color: #222222;
  flex: 0 0 200px; /*改变了*/
}

td {
  font-size: 60px;
}

.container {
  font-size: 60px;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  width: maxwidth; /*将宽度改为maxwidth*/
}

.item1 {
  background-color: red;
  white-space: nowrap;
  overflow: hidden;
  position: relative; /*添加了*/
  height: 1.2em; /*添加了*/
}

.item1 span {
  position: absolute; /*添加了*/
}

.item2 {
  background-color: blue;
}
    <div class="main">
  <div class="menu">
    菜单
  </div>

  <div class="container">
    <div class="item1"><span>The quick brown fox jumped over the lazy dog</span></div>
    <div class="item2">
      <table>
        <tr>
          <td>数据</td>
          <td>数据</td>
          <td>数据</td>
        </tr>
      </table>
    </div>
  </div>
</div>

    balas
    0
  • Batalbalas