縦書きテキストを達成するためのCSSの道:リアルへのWebフロントエンドエントリー

デフォルトの配置でHTMLテキストは水平に配置されますが、テキストを必要とするいくつかの特別な場合に縦に配置されています。

垂直配向単一行テキスト

縦書きテキストを達成するためのCSSの道:リアルへのWebフロントエンドエントリー

.onecn{
     width: 20px;  
    margin: 0 auto;  
    line-height: 24px;  
}

縦書きテキストを達成するためのCSSの道:リアルへのWebフロントエンドエントリー

.oneen{
    width: 15px;
    margin: 0 auto;
    line-height: 24px;
    font-size: 20px;
    word-wrap: break-word;/*英文的时候需要加上这句,自动换行*/
    word-break:break-all;
}
web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

説明:単一行のテキストを達成するためには、垂直方向に配置され、ただ正確にフォント幅を受信するための幅を設定する必要があります。

マルチテキストは、垂直に配置されました

縦書きテキストを達成するためのCSSの道:リアルへのWebフロントエンドエントリー

.two{  
    margin: 0 auto;  
    height: 140px;  
    writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ 
    writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl;*/  
}
web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

説明:高さは、テキストの間隔や行間隔を制御する必要がある場合、あなたは属性の文字間隔と行の高さを追加することができ、非常に重要です。

拡張:垂直テキストのアニメーション効果(アニメのキャラクターが上から下に表示)

最後~~~

おすすめ

転載: blog.51cto.com/14592820/2447572