Pourquoi « overflow : hidden » ne fonctionne-t-il pas sur un élément et comment puis-je y remédier ?

Pourquoi Overflow : Hidden ne fonctionne pas dans un

Overflow : Hidden est souvent utilisé pour masquer le contenu débordant dans un élément. Cependant, lorsqu'il est appliqué à un élément, il peut ne pas fonctionner comme prévu, entraînant l'expansion de la cellule au lieu de la troncature du texte.

Pour résoudre ce problème, deux propriétés CSS supplémentaires sont requises :

• table-layout: fixed - Cette propriété garantit que le tableau a une largeur fixe et que les cellules individuelles ne dépassent pas it.
• white-space: nowrap - Cette propriété empêche le texte de s'étendre sur plusieurs lignes, garantissant qu'il reste dans la largeur de cellule spécifiée.

Exemple :

Considérez le HTML et le CSS suivants extraits :

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

* {
  box-sizing: border-box;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 100px;
}

td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

Dans cet exemple, l'élément table a une largeur maximale fixe de 100 px, et l'élément L'élément a une largeur de 100px. Le texte dans la cellule sera désormais masqué au-delà de la largeur spécifiée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!