Maison > interface Web > Questions et réponses frontales > Comment implémenter la police CSS pour rester sur une ligne sans retour à la ligne

Comment implémenter la police CSS pour rester sur une ligne sans retour à la ligne

藏色散人
Libérer: 2023-01-04 09:36:51
original
4685 Les gens l'ont consulté

Comment implémenter des polices CSS pour les conserver sur une seule ligne sans retour à la ligne : 1. Utilisez l'attribut "word-break:keep-all;white-space:nowrap;" pour obtenir du texte sans retour à la ligne ; table, l'attribut set "word-break" définit le texte à ne pas renvoyer à la ligne.

Comment implémenter la police CSS pour rester sur une ligne sans retour à la ligne

L'environnement d'exploitation de ce tutoriel : système windows7, version css3, ordinateur thinkpad t480.

Recommandé : "Tutoriel vidéo CSS"

Comment définir les polices en CSS sur la même ligne :

Général Le texte ne s'enroule pas (applicable à l'inline et au bloc) :

.text-overflow {
    display:block;               /*内联对象需加*/
    width:31em;
    word-break:keep-all;       /* 不换行 */
    white-space:nowrap;       /* 不换行 */
    overflow:hidden;           /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;   /* 当对象内文本溢出时显示省略标记(...) ;
                              需与overflow:hidden;一起使用。*/
}
Copier après la connexion

Définissez le texte dans le tableau pour qu'il ne soit pas renvoyé à la ligne :

table{
    width:30em;
    table-layout:fixed;    /* 只有定义了表格的布局算法为fixed,
                           下面td的定义才能起作用。 */
}
td{
    width:100%;
    word-break:keep-all;             /* 不换行 */
    white-space:nowrap;            /* 不换行 */
    overflow:hidden;              /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;       /* 当对象内文本溢出时显示省略标记(...) ;
                                需与 overflow:hidden;一起使用。*/
}
Copier après la connexion

Introduction au code ci-dessus pour obtenir un texte qui ne s'enroule pas wrap:

word Le paramètre -break:keep-all ne peut couper les lignes qu'au niveau des espaces ou des traits d'union à mi-largeur.

white-space:nowrap le texte du paramètre de style ne sera pas renvoyé à la ligne, le texte continuera sur la même ligne jusqu'à ce que la balise

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal