1.一個(gè)句子的豎向排列

如圖：

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;/*英文的時(shí)候需要加上這句，自動(dòng)換行*/

}

我是豎列排版I AM ENGLISH

2.多個(gè)句子豎向排列(如古詩(shī))

如圖：

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

}

欲話毗陵君反袂，欲言夏口我沾衣。誰(shuí)知臨老相逢日，悲嘆聲多語(yǔ)笑稀。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

共勉

本文來(lái)源于網(wǎng)絡(luò)：查看?>https://blog.csdn.net/sangjinchao/article/details/60139706

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。