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

 </p><p>nowrap Le texte ne sera pas renvoyé à la ligne, le texte continuera sur la même ligne jusqu'à ce que la balise <br> </p><p>pre-wrap Préserve les séquences d'espaces, mais s'enroule normalement. </p><p>pre-line fusionne les séquences d'espaces mais conserve les nouvelles lignes. </p><p>inherit spécifie que la valeur de l'attribut espace blanc doit être héritée de l'élément parent. </p><p>Exemple : </p><p>Code CSS : </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">table {
    border : 1px solid red;
}
td {
    white-space:nowrap;
    text-overflow:ellipsis;
    width:50px;
    overflow:hidden;    
    display: block;
}