Maison > interface Web > tutoriel CSS > Comment empêcher le débordement de texte dans les cellules d'un tableau à hauteur fixe ?

Comment empêcher le débordement de texte dans les cellules d'un tableau à hauteur fixe ?

Linda Hamilton
Libérer: 2024-11-18 08:59:02
original
371 Les gens l'ont consulté

How to Prevent Text Overflow in Table Cells with Fixed Height?

Contrôler la hauteur des cellules du tableau pour éviter le débordement de texte

Un défi courant en HTML consiste à maintenir une hauteur spécifiée pour les cellules du tableau tout en empêchant le débordement de texte lorsque le contenu dépasse la limite de hauteur. Pour résoudre ce problème, CSS 2.1 impose que la hauteur des cellules du tableau s'adapte aux dimensions du contenu. Surmonter cette limitation nécessite une approche indirecte.

Restriction indirecte de la hauteur à l'aide du balisage interne

Pour restreindre indirectement la hauteur de la cellule, utilisez un élément div interne dans la cellule du tableau. En définissant les propriétés height et overflow sur l'élément div, la hauteur de la cellule reste fixe :

<td>
Copier après la connexion

Notez que l'élément div ne doit pas avoir la propriété display: table-cell, car cela le soumettrait à la Règles de cellule de tableau CSS 2.1.

Cette méthode permet d'insérer plusieurs lignes de texte dans la cellule tout en garantissant que le contenu excédentaire reste masqué en raison du débordement : propriété cachée appliquée à l'élément div.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal