CSS3 implémente la disposition verticale du texte-tutoriel CSS-php.cn

CSS3 implémente la disposition verticale du texte

不言

Libérer： 2018-07-09 17:42:38

original

2746 Les gens l'ont consulté

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;  //垂直方向，从左向右

Copier après la connexion

<!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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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 :

Introduction complète à l'ombre de texte de police intégrée aux marques d'omission de couleur dégradé CSS

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!