Heim  >  Artikel  >  Web-Frontend  >  So legen Sie vertikalen Text in CSS fest

So legen Sie vertikalen Text in CSS fest

藏色散人
藏色散人Original
2021-05-27 11:03:1213142Durchsuche

So legen Sie vertikalen Text in CSS fest: 1. Realisieren Sie einen einzelnen vertikalen Text durch Attribute wie „word-wrap: break-word;“ 2. Realisieren Sie mehrzeiligen vertikalen Text durch Attribute wie „writing-mode: tb“. -lr“ Text; 3. Verwenden Sie „rotate(90deg);“, um ein insgesamt vertikales Layout zu erreichen.

So legen Sie vertikalen Text in CSS fest

Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, DELL G3-Computer

Ein paar einfache Methoden, um mit CSS ein vertikales Textlayout zu erreichen

Im Folgenden werden mehrere Methoden vorgestellt, mit denen Sie mithilfe von CSS vertikalen Text erreichen können Layout:

1. Die vertikale Anordnung eines Satzes

ist wie im Bild gezeigt:

<!DOCTYPE html>  <html>  <head>  
    <title>test</title>  
    <meta charset="UTF-8">  </head>  <style>  .one {  
    width: 20px;  
    margin: 0 auto;  
    line-height: 24px;  
    font-size: 20px;}.two {  
    width: 15px;  
    margin: 0 auto;  
    line-height: 24px;  
    font-size: 20px;  
    word-wrap: break-word;/*英文的时候需要加上这句,自动换行*/  }  </style>  <body>  
    <p class="one">我是竖列排版</p>  
    <p class="two">I AM ENGLISH</p>  </body>  </html>

2. Die vertikale Anordnung mehrerer Sätze (z. B. alte Poesie)

ist wie im Bild gezeigt Bild:

<!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>  
    <p class="one">欲话毗陵君反袂,欲言夏口我沾衣。谁知临老相逢日,悲叹声多语笑稀。</p>  
    <p class="one">I AM ENGLISH</p></body>  </html>

3. Die Schriftart ist horizontal und das Ganze vertikal. Zum Satz

wie im Bild gezeigt:

<!DOCTYPE html><html><head>
    <title>test</title>
    <meta charset="UTF-8"></head><style>.one {
    margin: 150px auto;
    width: 200px;
    font-size: 20px; 
    line-height: 24px;
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);     /* IE 9 */
    -moz-transform:rotate(90deg);     /* Firefox */
    -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
    -o-transform:rotate(90deg);     /* Opera */}</style><body>
    <p class="one">欲话毗陵君反袂</p>
    <p class="one">ENGLISH</p></body></html>

Empfohlenes Lernen: „CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie vertikalen Text in CSS fest. 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