萬盛學電腦網 >> 網頁制作 >> 交互設計 >> CSS創建豎排文字的簡單方法
CSS創建豎排文字的簡單方法
在制作網頁的時候我們經常需要創建一些豎排的文字，或許這對你來說是一件很簡單的事情，但是你是否想過用CSS可有N種創建豎排文字的方法？下面是由我翻譯自Nettuts+的文章，希望這幾種方法能夠給你帶來一些提示。
方法一：<br/>標簽
一種可能的方法(但不推薦)是在每個字母後面添加<br />標簽來實現豎排文字：
以下為引用的內容：
<h1>
N <br />E <br />T <br />T <br />U <br />T <br />S
</h1>
千萬不要使用使用這種方法，它是跛腳和草率的。
方法二：靜態包裹
通過這個方法，我們將每個字母包裹在一個span中，然後在CSS中設置它的display屬性為block。
以下為引用的內容：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>
<style>
h1 span { display: block; }
</style>
</head>
<body>
<h1>
<span> N </span>
<span> E </span>
<span> T </span>
<span> T </span>
<span> U </span>
<span> T </span>
<span> S </span>
</h1>
</body>
</html>
這種方法的問題是，除了可怕的標簽外，它需要你手工去給每個字母用span括起來。如果這些文字是由CMS動態生成的，那就別用這種方法了。
方法三：使用JavaScript
我最初的想法是用JavaScript動態地添加span標簽，這樣我們就避開了方法二遇到的問題。
以下為引用的內容：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>
<style>
h1 span { display: block; }
</style>
</head>
<body>
<h1> NETTUTS </h1>
<script>
var h1 = document.getElementsByTagName('h1')[0];
h1.innerHTML = '<span>' + h1.innerHTML.split('').join('</span><span>') + '</span>';
</script>
</body>
</html>
這個方法絕對是一個進步。以上方法中，我們將一行文本(NETTUTS)分拆放到一個數組中，並且將每個字母用span標簽括起來。雖然我們可以用如for語句或$.map來篩選這個數組，但是更好更快的方法是手動地同時將文字插入和括起來。雖然相比方法二，這種方法更好，但是仍然不推薦此方法：
在JavaScript被禁用的情況下會破壞你的布局。
理想的情況下，如果可能的話，我們應該使用CSS來完成這個任務。
方法四：給容器指定一個寬度
如果可能的話，還是讓我們遠離JavaScript吧。如果我們給容器元素指定一個寬度，並強迫文字換行，如何？那是可以的。
以下為引用的內容：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>
<style>
h1 {
width: 50px;
font-size: 50px;
word-wrap: break-word;
}
</style>
</head>
<body>
<h1> NETTUTS </h1>
</body>
</html>
在這個方法中，我們給h1定義很窄的寬度，然後是其文字的寬度等於外圍的寬度，最後設置word-wrap 等於 break-word，這樣我們就可以強制每個字母單獨在一行。不過需要注意的是， break-word是一個CSS3的屬性，並不是所有浏覽器都兼容。如果排除舊浏覽器的話，這個問題貌似就可以解決了。。。但並完全是！上面的演示確實可以正常工作，但是玩像素值是很危險的，不信可以看看 將大寫字母轉換成小寫字母的後果(在IE下看看)：
所以，使用這種方法，當你給h1指定具體像素寬度的時候，要特別小心。這種方法也不推薦！
方法五：使用 letter-spacing
作為預防措施，並擴展方法四，我們為什麼不申請相當大的letter-spacing來解決這個問題？
以下為引用的內容：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>
<style>
h1 {
width: 50px;
font-size: 50px;
word-wrap: break-word;
letter-spacing: 20px; /* Set large letter-spacing as precaution */
}
</style>
</head>
<body>
<h1> Nettuts </h1>
</body>
</html>
這似乎解決了這個問題，但是在這裡，我們又使用了一些CSS3的屬性。
方法六：使用 ems
另外，還有一個一行內的解決方法。不知道你有沒有記得，當給父級元素指定 overflow: hidden 的時候，父元素就會擴展以包含浮動？ 這個方法就類似這個，關鍵是使用了 em，並給每個字母之間添加了空格。
以下為引用的內容：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>
<style>
h1 {
width: 1em;
font-size: 40px;
letter-spacing: 40px; /* arbitrarily large letter-spacing for safety */
}
</style>
</head>
<body>
<h1> N e t t u t s </h1>
</body>
</html>
漂亮又整潔，對不對？並且，這種方法可以給你的文字指定任意的font-size，因為我們使用了em，它就相當於選擇字體的x-height，給我們提供了更多的靈活性。
但是，你是否又一次想起，有時一行中會有不止一個字母。可實際情況是，你可以安全使用這種方法，因為我已經指定了一個相當大的letter-spacing，以確保一行只會有一個字母。
到目前為止，據我所知，這是最好的跨浏覽器兼容的解決方案。
方法七：Whitespace
最後一個方法來達到這種效果是使用 white-space屬性。
以下為引用的內容：
<!DOCTYPE HTML>
<html lang="
- 上一頁:Web表單設計：表單結構
- 下一頁:微觀角度看網頁
