Heim > Artikel > Web-Frontend > CSS3 implementiert die vertikale Textanordnung

CSS3 implementiert die vertikale Textanordnung

不言Original: 2018-07-09 17:42:382671Durchsuche

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

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

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>

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Formatierungskontext auf CSS-Blockebene BFCNächster Artikel：Formatierungskontext auf CSS-Blockebene BFC

In Verbindung stehende Artikel

Mehr sehen