Maison >interface Web >tutoriel CSS >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:4825120parcourir
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 :
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 :
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 :
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 :
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!