CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの水平文字を含む垂直テキスト

text-orientation：uprightとwriting-mode：vertical-rlを指定することで、垂直方向のテキストを水平方向のCSSで表示できます。

構文

CSS書き込みモードとテキスト方向プロパティの構文は次のとおりです-

Selector {
   writing-mode: /*value*/
   text-orientation: /*value*/
}

例

次の例は、CSSのoutline-offsetプロパティを示しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         h4 {
            text-orientation: upright;
            writing-mode: vertical-rl;
            line-height: 3;
            box-shadow: inset 0 0 3px khaki;
         }
      </style>
   </head>
   <body>
      <h4>Sed nec tortor</h4>
   </body>
</html>

これにより、次の出力が得られます

CSSの水平文字を含む垂直テキスト

例

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            display: flex;
            flex: 1;
         }
         p {
            text-orientation: upright;
            writing-mode: vertical-rl;
            line-height: 3;
            box-shadow: inset 0 0 13px orange;
         }
      </style>
   </head>
   <body>
      <p>One</p>
      <p>Two</p>
      <p>Three</p>
      <p>Four</p>
   </body>
</html>

これにより、次の出力が得られます

CSSの水平文字を含む垂直テキスト


  1. CSSで光るテキストを作成するにはどうすればよいですか？

    CSSを使用して光るテキストを作成するためのコードは、次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    body {       background-color: rgb(0, 0, 0);       font-family

  2. CSSで垂直線を作成するにはどうすればよいですか？

    CSSで垂直線を作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    .vLine {       border-left: 6px solid rgb(128, 0, 128);       height: