有時候，我們需要對網頁某個區域的文字豎排，豎向排列，橫向的當然大家都見慣了，對于豎排，一時間找不到思路了，呵呵，其實和橫排一樣簡單，下面介紹4種方法來實現CSS文字豎排。

第一種方法：將需要豎排顯示的字符放在span中，在CSS中設置span的display屬性為block，不過不推薦使用這種方法，因為有些麻煩，代碼如下：

h1?span?{?display:?block;?}

?N?

?E?

?T?

?T?

?U?

?T?

?S?

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

html>

Vertical?Text

h1?{

width:?50px;

font-size:?50px;

word-wrap:?break-word;

}

?NETTUTS?

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

html>

豎向排列的文字

h1?{

width:?50px;

font-size:?50px;

word-wrap:?break-word;

letter-spacing:?20px;

}

我愛北京天安門

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

html>

Vertical?Text

h1?span?{?display:?block;?}

?NETTUTS?

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

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

總結

以上是生活随笔為你收集整理的flex 文字竖排_4种CSS文字竖排方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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