|
方法六：使用 ems
另外，還有一個(gè)一行內(nèi)的解決方法。不知道你有沒有記得，當(dāng)給父級(jí)元素指定 overflow: hidden 的時(shí)候，父元素就會(huì)擴(kuò)展以包含浮動(dòng)？ 這個(gè)方法就類似這個(gè)，關(guān)鍵是使用了 em，并給每個(gè)字母之間添加了空格。
<!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>
點(diǎn)擊查看演示
漂亮又整潔，對(duì)不對(duì)？并且，這種方法可以給你的文字指定任意的font-size，因?yàn)槲覀兪褂昧薳m，它就相當(dāng)于選擇字體的x-height，給我們提供了更多的靈活性。
但是，你是否又一次想起，有時(shí)一行中會(huì)有不止一個(gè)字母�？蓪�(shí)際情況是，你可以安全使用這種方法，因?yàn)槲乙呀?jīng)指定了一個(gè)相當(dāng)大的letter-spacing，以確保一行只會(huì)有一個(gè)字母。
到目前為止，據(jù)我所知，這是最好的跨瀏覽器兼容的解決方案。
方法七：Whitespace
最后一個(gè)方法來達(dá)到這種效果是使用 white-space屬性。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical Text</title>
<style>
h1 { white-space: pre; }
</style>
</head>
<body>
<h1>
J
E
F
F
R
E
Y
</h1>
</body>
</html>
點(diǎn)擊查看演示
通過設(shè)置 white-space 的值為 pre，即可控制文字的排版就像在一個(gè) pre 標(biāo)簽中一樣。因此，它會(huì)嚴(yán)格地顯示你添加的空格。
本文鏈接：http://m.95time.cn/tech/web/2010/8140.asp 
出處：露兜博客
責(zé)任編輯：bluehearts
上一頁 CSS創(chuàng)建豎排文字的簡(jiǎn)單方法 [2] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 3 頁 CSS創(chuàng)建豎排文字的簡(jiǎn)單方法 [3]
