css實現文字豎排

h1 span { display: block; }

N

E

T

T

U

T

S

第二種方法A：同樣使用CSS，在需要豎向顯示的地方，強制定義顯示區域的寬度，這樣字符會自動豎向排列：請看具體代碼：

Vertical Text

h1 {

width: 50px;

font-size: 50px;

word-wrap: break-word;

}

NETTUTS

第二種方法B：同樣是使用CSS，推薦使用這種方法，覺得這個方法兼容性也好，而且代碼簡潔，字符也容易控制。

豎向排列的文字

h1 {

width: 50px;

font-size: 50px;

word-wrap: break-word;

letter-spacing: 20px;

}

我愛北京天安門

第三種方法：使用JavaScript(不推薦，其實這么一個小小的功能，動用JS就太不劃算了，畢竟我們有比這更有效、更簡潔的辦法)

Vertical Text

h1 span { display: block; }

NETTUTS

var h1 = document.getElementsByTagName(‘h1′)[0];

h1.innerHTML = ‘’ + h1.innerHTML.split(”).join(‘’) + ‘’;

四種方法介紹完了，究竟哪一種更適合您呢？自己比較下，根據你自己的實際情況選擇吧，每種方法各有千秋。

標簽:css

發表評論：

昵稱

郵件地址 (選填)

個人主頁 (選填)

總結

以上是生活随笔為你收集整理的css表格文字超数量就竖排_css实现文字竖排的全部內容，希望文章能夠幫你解決所遇到的問題。

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