1.一個句子的豎向排列

如圖：

1.

? ? ? ? ? ? ? ? ? ? ? 2.?

test

.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;/*英文的時候需要加上這句，自動換行*/

}

我是豎列排版I AM ENGLISH

2.多個句子豎向排列(如古詩)

如圖：

1.

? ?2.

?3.

test

.one {

margin: 0 auto;

height: 140px;

writing-mode: vertical-lr;/*從左向右 從右向左是 writing-mode: vertical-rl;*/

writing-mode: tb-lr;/*IE瀏覽器的從左向右 從右向左是 writing-mode: tb-rl；*/

}

欲話毗陵君反袂，欲言夏口我沾衣。誰知臨老相逢日，悲嘆聲多語笑稀。I AM ENGLISH

3.字體橫行，整體豎向排版

如圖：

test

.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 */

}

欲話毗陵君反袂ENGLISH

共勉

本文來源于網絡：查看?>https://blog.csdn.net/sangjinchao/article/details/60139706

總結

以上是生活随笔為你收集整理的html 英文文字纵向排列,CSS几种简单方法实现文字竖向排版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。