recherche

Maison  >  Questions et réponses  >  le corps du texte

Titre réécrit comme : menu flexbox et tableau avec titre - est-il possible de tronquer le titre en fonction de la largeur du tableau ?

Je veux réaliser quelque chose comme ça en utilisant flexbox CSS. Le menu a une largeur fixe, mais le tableau peut s'agrandir automatiquement et l'en-tête ne doit pas dépasser la largeur du tableau, même s'il est long. En d’autres termes, le tableau doit pouvoir étirer les conteneurs de colonnes, mais pas les en-têtes. 

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

Facile à mettre en œuvre avec une seule colonne flexible. 

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

Mais lors de l'ajout du menu, tout ne fonctionne pas correctement, le titre n'est pas tronqué. 

<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粉642920522487 Il y a quelques jours457

répondre à tous(1)je répondrai

  • P粉512526720

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

    Vous souhaitez donc que l'élément contenant le titre change de taille avec ses frères et sœurs, mais pas avec ses propres enfants.

    La seule façon à laquelle je peux penser est d'envelopper le texte du titre dans un élément approprié - dans ce cas <span> - 然后使用position: absolute将其从流中取出，并在标题的父元素上使用position: relative. Ensuite, vous devez définir une certaine hauteur pour le titre.

    Exemple

    J'ai remplacé la largeur par flex: 0 0 200px. Cela empêchera le menu de changer de taille, restant toujours à 200 pixels. 

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

    répondre
    0
  • Annulerrépondre