Maison  >  Article  >  interface Web  >  Comment afficher le texte CSS verticalement ? Comment afficher le texte CSS verticalement

Comment afficher le texte CSS verticalement ? Comment afficher le texte CSS verticalement

不言
不言original
2018-09-18 14:07:4825066parcourir

Parfois, le texte de la page Web ne peut pas être affiché horizontalement en raison d'exigences particulières. À l'heure actuelle, il est nécessaire d'afficher le texte verticalement. Alors, Comment afficher le texte verticalement dans la page Web ? L'article suivant présentera comment réaliser un affichage de texte vertical avec CSS.

Méthode 1 pour afficher le texte CSS verticalement :

Utilisez l'attribut writing-mode

Syntaxe : writing-mode:lr-tb ou writing- mode:tb-rl

Paramètres : lr-tb : de gauche à droite, de haut en bas ; tb-rl : de haut en bas, de droite à gauche.

<!DOCTYPE html>  
<html>  
<head>  
    <title>test</title>  
    <meta charset="UTF-8">  
</head>  
<style>  
.one {  
    margin: 0 auto;  
    height: 140px;  
    writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/  
    writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl;*/  
}  
</style>  
<body>  
    <div class="one">十轮霜影转庭梧,此夕羁人独向隅。
未必素娥无怅恨,玉蟾清冷桂花孤。 </div>  
</body>  
</html>

L'effet d'affichage vertical du texte CSS est le suivant :

Comment afficher le texte CSS verticalement ? Comment afficher le texte CSS verticalement

Cette méthode a une mauvaise compatibilité et ne peut être consultée que dans IE Il ne peut être pris en charge que par le navigateur, il n'est donc pas recommandé de l'utiliser. Je ne le présenterai pas ici. Si vous souhaitez en savoir plus, vous pouvez vous référer au manuel css en ligne.

Méthode 2 pour l'affichage vertical du texte CSS :

Définissez la largeur de l'objet texte afin que seul le texte suivant puisse être disposé, afin que le texte ne puisse pas tenir deux caractères sur une ligne. Le retour à la ligne automatique du texte crée automatiquement un besoin de composition verticale.

<!DOCTYPE html>  
<html>  
<head>  
    <title>test</title>  
    <meta charset="UTF-8">  
</head>  
<style>  
.one {  
    width: 52px;  
    margin: 0 auto;  
    line-height: 56px;  
    font-size: 50px;
} 
</style>  
<body>  
    <div class="one">中秋月</div>  
</body>  
</html>

Remarque : word-wrap : break-word ;/*Vous devez ajouter cette phrase en anglais pour retourner automatiquement à la ligne*/

Instructions : définissez une largeur plus petite pour le texte DIV afin qu'un seul texte puisse être disposé dans une rangée, afin que le texte soit automatiquement renvoyé à la ligne pour obtenir une disposition en colonnes verticales.

cssL'effet de l'affichage vertical du texte est le suivant :

Comment afficher le texte CSS verticalement ? Comment afficher le texte CSS verticalement

texte css vertical display Méthode 3 :

Il est recommandé d'utiliser cette méthode. Je pense que cette méthode a une bonne compatibilité et le code est simple

<!DOCTYPE html> 
<html> 
<head> 
<style> 
h1 { width: 50px; font-size: 50px;letter-spacing: 20px; } 
</style> 
</head> 
<body> 
<h1>中秋月</h1>
</body> 
</html>

L'effet d'affichage vertical du texte CSS est le suivant :

Comment afficher le texte CSS verticalement ? Comment afficher le texte CSS verticalement

Méthode 4 d'affichage vertical du texte CSS :

Utiliser br Le retour à la ligne permet d'afficher le texte verticalement.

Utilisez la balise de saut de ligne html br pour envelopper le texte. Ajoutez une balise de saut de ligne br après chaque texte pour le faire apparaître dans des colonnes verticales. .

    <!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
    body{text-align:center; line-height:60px;font-size:30px} 
    /* CSS注释说明:设置css文字居中,css行高为22px间隔 */ 
    </style> 
    </head> 
    <body> 
    p<br>h<br>p<br>中<br>文<br>网
    </body> 
    </html>

L'effet de l'affichage vertical du texte CSS est le suivant :

Comment afficher le texte CSS verticalement ? Comment afficher le texte CSS verticalement

Cet article a été introduit ici dans. En fait, il y en a d'autres. Il existe de nombreuses façons d'afficher du texte verticalement, je ne les présenterai donc pas une par une ici. Pour un contenu plus passionnant, vous pouvez prêter attention au site Web chinois php.

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