CSS定義文字豎排顯示
.vertical-text { writing-mode: vertical-rl; text-orientation: mixed; }
在傳統的西方文化中,文字從左到右排列,但在一些亞洲國家,比如中國和日本,文字從上到下排列。如果您需要制作您的網站的本土化版本,CSS定義文字豎排顯示是一個很有用的技巧。
在CSS中,文字豎排顯示的關鍵是writing-mode和text-orientation屬性。writing-mode表示元素內文本的書寫模式。可以設置為豎排(vertical-rl)或橫排(horizontal-tb)。text-orientation屬性表示文字方向??梢栽O置為mixed或upright。
下面的代碼展示了一個豎排文本的例子,你可以在你自己的項目中調整和修改。
<!DOCTYPE html> <html> <head> <title>實例</title> <style> .vertical-text { writing-mode: vertical-rl; text-orientation: mixed; font-size: 24px; display: inline-block; margin: 10px; padding: 10px; border: 1px solid; } </style> </head> <body> <div class="vertical-text">豎向文本1</div> <div class="vertical-text">豎向文本2</div> <div class="vertical-text">豎向文本3</div> </body> </html>
上一篇css定位根據父元素
下一篇div 多行合并