html中文字的默認排列是橫向排列的,但一些特殊情況下是需要文字豎向排列的。
單行文字豎向排列
.onecn{ width: 20px; margin: 0 auto; line-height: 24px; }
.oneen{ width: 15px; margin: 0 auto; line-height: 24px; font-size: 20px; word-wrap: break-word;/*英文的時候需要加上這句,自動換行*/ word-break:break-all;}
說明:實現文字單行豎向排列,只需要把寬度設置為剛好容納一個字體的寬度即可。
多行文字豎向排列
.two{ margin: 0 auto; height: 140px; writing-mode: vertical-lr;/*從左向右 從右向左是 writing-mode: vertical-rl;*/ writing-mode: tb-lr;/*IE瀏覽器的從左向右 從右向左是 writing-mode: tb-rl;*/ }
說明:高度很重要,如果需要控制文字的間距和行距,可以添加屬性letter-spacing和line-height。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答