Comment empêcher les cellules d'un tableau CSS de s'enrouler

Comment réaliser que les cellules du tableau CSS ne s'enroulent pas : 1. Ouvrez le fichier HTML correspondant ; 2. Affichez le contenu du tableau et des balises td ; 3. Définissez l'attribut css des balises tableau et td sur " white-space:nowrap ;" empêchera le retour à la ligne du texte du tableau.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3, ordinateur DELL G3

Comment faire pour que les cellules du tableau CSS ne s'enroulent pas ?

Paramètre de non-retournement du texte du tableau CSS :

Souvent, au cours du développement du projet, nous rencontrerons des problèmes de retour à la ligne causés par trop de contenu cellulaire, ce qui rend le tableau très moche. Voyons comment utiliser CSS pour que le texte du tableau ne soit pas renvoyé à la ligne.

CSS peut empêcher le retour à la ligne du texte du tableau en définissant le style white-space:nowrap; pour les balises table et td.

Le code est le suivant :

/*让单元格内容过多时也不换行*/
#datasTablediv table td{
white-space: nowrap;
}

L'attribut white-space définit comment gérer les espaces blancs dans l'élément.

Cet attribut déclare comment gérer les caractères d'espacement dans les éléments pendant le processus de mise en page. Les valeurs pre-wrap et pre-line sont nouvelles dans CSS 2.1.

Valeur d'attribut :

par défaut normal. Les espaces blancs sont ignorés par le navigateur.

les espaces pré seront conservés par le navigateur. Il se comporte comme la balise e03b848252eb9375d56be284e690e873

nowrap Le texte ne sera pas renvoyé à la ligne, le texte continuera sur la même ligne jusqu'à ce que la balise 0c6dc11e160d3b678d68754cc175188a

pre-wrap Préserve les séquences d'espaces, mais s'enroule normalement.

pre-line fusionne les séquences d'espaces mais conserve les nouvelles lignes.

inherit spécifie que la valeur de l'attribut espace blanc doit être héritée de l'élément parent.

Exemple :

Code CSS :

table {
    border : 1px solid red;
}
td {
    white-space:nowrap;
    text-overflow:ellipsis;
    width:50px;
    overflow:hidden;    
    display: block;
}

Code HTML :

<table>
    <tr><td>此处文本超过设定的宽度</td></tr>
</table>

Apprentissage recommandé : "Tutoriel vidéo CSS"

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!