Maison > Article > interface Web > CSS3 implémente la disposition verticale du texte
CSS3 implémente la disposition verticale du texte
- 不言original
- 2018-07-09 17:42:382671parcourir
Cet article présente principalement la disposition verticale du texte en CSS3, qui a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer
Dans un projet récent, le texte a été disposé verticalement. , c'est-à-dire en utilisant l'attribut writing-mode de CSS.
writing-mode était à l'origine un attribut pris en charge par IE. Plus tard, ce nouvel attribut a été ajouté dans CSS3, donc la syntaxe dans IE sera différente de celle des autres navigateurs.
Standard CSS3 1.0
writing-mode:horizontal-tb;//默认：水平方向，从上到下 writing-mode:vertical-rl; //垂直方向，从右向左 writing-mode:vertical-lr; //垂直方向，从左向右
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS文字垂直排列</title>
<style type="text/css">
div{
border: 1px solid lightblue;
padding: 5px;
}
.vertical-text{
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="vertical-text">
1. 文字垂直排列 <br />
2. 文字垂直排列
</div>
</body>
</html>
2.0 IE
Pour des raisons historiques, la valeur de cet attribut sous IE est particulièrement compliqué :
-ms-writing-mode: lr-tb | lr | rl | tb
Pour plus de détails, veuillez consulter la documentation officielle :
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode/
3.0 Certaines applications
3.1 Centrage vertical
En utilisant cet attribut, nous pouvons combiner text-align:center pour obtenir un centrage vertical ou utiliser margin: auto.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 图片垂直居中</title>
<style type="text/css">
div{
border: 1px solid lightblue;
padding: 5px;
height: 500px;
}
.vertical-img{
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: bt-rl;
writing-mode: vertical-rl;
text-align: center;
}
</style>
</head>
<body>
<div class="vertical-img">
<img src="1.jpg"/>
</div>
</body>
</html>
3.2 Effet de descente de texte
Nous pouvons définir le mode d'écriture du texte, puis le combiner avec l'indentation du texte pour obtenir l'effet effet lorsque vous cliquez sur le texte Effet de naufrage ;
<!DOCTYPE html> 2 <html>
<head>
<meta charset="utf-8">
<title>文字下沉效果</title>
<style type="text/css">
.btn{
width: 50px;
height: 50px;
line-height: 50px;
color: white;
text-align: center;
font-size: 16px;;
display: inline-block;
border-radius: 50%;
background: gray;
cursor: pointer;
}
.btn:active{
text-indent: 2px;
}
.vertical-text{
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
*writing-mode: tb-rl;
}
</style>
</head>
<body>
<span>点击领红包</span>
<p class="vertical-text btn">开 </p>
</body>
</html>Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au chinois PHP. site web!
Recommandations associées :
Analyse CSS3 du rendu du modèle de transformation de transformation
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!