Comment obtenir du texte CSS TD sans retour à la ligne

Comment implémenter du texte CSS td sans retour à la ligne : ouvrez d'abord le code CSS correspondant ; puis définissez le style "white-space:nowrap;" pour le tableau et les balises td pour empêcher le texte du tableau de se retourner à la ligne. .

L'environnement d'exploitation de ce tutoriel : ordinateur Dell G3, système Windows 7, version HTML5&&CSS3.

Définition du texte du tableau CSS sans retour à la ligne

Plusieurs fois au cours du développement du projet, nous rencontrerons des problèmes de retour à la ligne causés par trop de contenu de cellule, faisant apparaître le tableau très laid. Voyons comment utiliser CSS pour que le texte du tableau ne soit pas renvoyé à la ligne.

css peut définir le style white-space:nowrap; pour le tableau et les balises td afin que le texte du tableau ne soit pas renvoyé à la ligne.

Le code est le suivant :

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

L'attribut white-space définit comment gérer l'espace blanc 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 de l'attribut :

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

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

nowrap Le texte ne sera pas renvoyé à la ligne, le texte continuera sur la même ligne jusqu'à ce que la balise 
 
pre-wrap Préserve les séquences d'espaces, mais enveloppe les lignes normalement. 
pre-line fusionne les séquences d'espaces mais conserve les nouvelles lignes. 
inherit spécifie que la valeur de l'attribut white-space 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; }
       

        Copier après la connexion
       
      
      
code html :
      

       
 
此处文本超过设定的宽度
 
       

        Copier après la connexion
       
      
      
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!