Maison > interface Web > tutoriel CSS > le corps du texte

CSS pour obtenir un effet vertical de texte

王林
Libérer: 2020-04-18 09:11:29
avant
3187 Les gens l'ont consulté

CSS pour obtenir un effet vertical de texte

La disposition par défaut du texte chinois en HTML est horizontale, mais dans certains cas particuliers, le texte doit être disposé verticalement.

Une seule ligne de texte disposée verticalement

CSS pour obtenir un effet vertical de texte

.onecn{
     width: 20px;  
    margin: 0 auto;  
    line-height: 24px;  
}
Copier après la connexion

(Tutoriel recommandé : Tutoriel de démarrage CSS)

CSS pour obtenir un effet vertical de texte

.oneen{
    width: 15px;
    margin: 0 auto;
    line-height: 24px;
    font-size: 20px;
    word-wrap: break-word;/*英文的时候需要加上这句,自动换行*/
    word-break:break-all;
}
Copier après la connexion

Explication : Pour obtenir une disposition verticale du texte sur une seule ligne, il vous suffit de définir la largeur juste assez pour accueillir une police.

Texte multiligne disposé verticalement

CSS pour obtenir un effet vertical de texte

.two{  
    margin: 0 auto;  
    height: 140px;  
    writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ 
    writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl;*/  
}
Copier après la connexion

Remarque : Si vous devez contrôler l'espacement et l'interligne du texte, vous pouvez le faire. ajoutez les attributs espacement des lettres et hauteur de ligne.

Tutoriels vidéo associés recommandés : 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!

Étiquettes associées:
source:jb51.net
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