Maison >interface Web >tutoriel CSS >CSS pour obtenir un effet vertical de texte

CSS pour obtenir un effet vertical de texte

王林
王林avant
2020-04-18 09:08:183211parcourir

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;  
}

(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;
}

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;*/  
}

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer