CSS3 implementiert die vertikale Textanordnung-CSS-Tutorial-php.cn

CSS3 implementiert die vertikale Textanordnung

不言

Freigeben： 2018-07-09 17:42:38

Original

2745 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die vertikale Anordnung von Text in CSS3 vorgestellt, die einen gewissen Referenzwert hat. Jetzt können Freunde in Not darauf verweisen.

In einem kürzlich durchgeführten Projekt wurde Text vertikal angeordnet ., also unter Verwendung des Attributs writing-mode von CSS.

writing-mode war ursprünglich ein vom IE unterstütztes Attribut. Später wurde dieses neue Attribut in CSS3 hinzugefügt, sodass sich die Syntax im IE von der in anderen Browsern unterscheidet.

1.0 CSS3-Standard

writing-mode:horizontal-tb;//默认：水平方向，从上到下 
writing-mode:vertical-rl;  //垂直方向，从右向左
writing-mode:vertical-lr;  //垂直方向，从左向右

Nach dem Login kopieren

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

Nach dem Login kopieren

2.0 IE

Aus historischen Gründen ist der Attributwert unter IE besonders kompliziert:

-ms-Writing-Modus: lr-rl |. tb-rl |. lr-bt |
Einzelheiten finden Sie in der offiziellen Dokumentation:

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode/

3.0 Einige Anwendungen

3.1 Vertikale Zentrierung

Durch die Verwendung dieses Attributs können wir text-align:center kombinieren, um eine vertikale Zentrierung zu erreichen, oder margin: auto verwenden.

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

Nach dem Login kopieren

3.2 Effekt der Textsenkung

Wir können den Schreibmodus des Textes festlegen und ihn dann mit dem Texteinzug kombinieren, um die Textsenkung zu realisieren Der Text, wenn darauf geklickt wird.

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

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Umfassende Einführung in die CSS-Verlaufsfarbe, Auslassungsmarkierung, eingebettete Schriftart, Textschatten

CSS3-Analyse des Transformationsmodell-Renderings

Das obige ist der detaillierte Inhalt vonCSS3 implementiert die vertikale Textanordnung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!