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

藏色散人
藏色散人original
2020-12-11 09:45:374638parcourir

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;一起使用。*/
}

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;一起使用。*/
}

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 0c6dc11e160d3b678d68754cc175188a

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!

Déclaration:
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