Maison >interface Web >tutoriel CSS >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 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 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; }
code html :
<table> <tr><td>此处文本超过设定的宽度</td></tr> </table>
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!