Pourquoi `overflow: Hidden` ne fonctionne-t-il pas sur un `` élément pour tronquer le texte ?

Débordement caché inefficace dans ?

Problème :
Un

la cellule destinée à avoir une largeur fixe déborde de texte en excès, élargissant les limites de la cellule.

Solution :
Pour appliquer la troncature du texte dans la cellule, une combinaison de propriétés CSS est requise.

1. disposition de la table : fixe

   • Garantit que la largeur du tableau reste statique.

2. débordement : caché sur

   • Peaux débordantes text.

3. white-space: nowrap on

   • Empêche le texte de s'enrouler dans la cellule.

   Exemple (Colonne à largeur fixe) :
   

   
   

    box-sizing : border-box;<br>}<br>table {<br> table-layout : fixe ;<br> border-collapse : réduire;<br> largeur : 100%;<br> largeur maximale : 100px;<br>}<br>td {<br> arrière-plan : #F00;<br> remplissage : 20px;<br> débordement : caché;<br> espace blanc : nowrap;<br> largeur : 100px;<br> bordure : solide 1px #000;<br>}

   
   

    <tbody>
   <pre class="brush:php;toolbar:false"><tr>
     <td>
       This_is_a_terrible_example_of_thinking_outside_the_box.
     </td>
   </tr>
   <tr>
     <td>
       This_is_a_terrible_example_of_thinking_outside_the_box.
     </td>
   </tr>

   
   
   

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!