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

 </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 enveloppe les lignes 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 white-space 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;
}

Copier après la connexion

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!