CSSで縦書きテキストを設定する方法-フロントエンドQ&A-php.cn

CSSで縦書きテキストを設定する方法

藏色散人

リリース： 2023-01-06 11:15:40

オリジナル

13167 人が閲覧しました

CSS で縦書きテキストを設定する方法: 1. "word-wrap:break-word;" などの属性で単一の縦書きテキストを実現します; 2. "writing-mode: tb-" などの属性で実現しますlr" 複数行の縦書きテキスト; 3. 全体的に縦方向のレイアウトを実現するには、"rotate(90deg);" を使用します。

CSSで縦書きテキストを設定する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター

CSS を使用して縦書きテキストレイアウトを実現するいくつかの簡単な方法

以下では、Css を使用して縦書きテキストレイアウトを実現するいくつかの方法を紹介します:

1. 文

の縦方向の配置を図に示します:

<!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. 複数の文を縦に並べたもの (古代の詩など)

次のように:

<!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 。図に示すように、フォントは水平で、全体のレイアウトは垂直です。

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

ログイン後にコピー

推奨される調査: 「

css ビデオチュートリアル」