|
點(diǎn)擊查看演示
這個(gè)方法絕對(duì)是一個(gè)進(jìn)步。以上方法中，我們將一行文本(NETTUTS)分拆放到一個(gè)數(shù)組中，并且將每個(gè)字母用span標(biāo)簽括起來(lái)。雖然我們可以用如for語(yǔ)句或$.map來(lái)篩選這個(gè)數(shù)組，但是更好更快的方法是手動(dòng)地同時(shí)將文字插入和括起來(lái)。雖然相比方法二，這種方法更好，但是仍然不推薦此方法：
在JavaScript被禁用的情況下會(huì)破壞你的布局。
理想的情況下，如果可能的話，我們應(yīng)該使用CSS來(lái)完成這個(gè)任務(wù)。
方法四：給容器指定一個(gè)寬度
如果可能的話，還是讓我們遠(yuǎn)離JavaScript吧。如果我們給容器元素指定一個(gè)寬度，并強(qiáng)迫文字換行，如何？那是可以的。
<!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>
點(diǎn)擊查看演示
在這個(gè)方法中，我們給h1定義很窄的寬度，然后是其文字的寬度等于外圍的寬度，最后設(shè)置word-wrap 等于 break-word，這樣我們就可以強(qiáng)制每個(gè)字母單獨(dú)在一行。不過(guò)需要注意的是， break-word是一個(gè)CSS3的屬性，并不是所有瀏覽器都兼容。如果排除舊瀏覽器的話，這個(gè)問(wèn)題貌似就可以解決了。。。但并完全是！上面的演示確實(shí)可以正常工作，但是玩像素值是很危險(xiǎn)的，不信可以看看 將大寫(xiě)字母轉(zhuǎn)換成小寫(xiě)字母的后果(在IE下看看)：
所以，使用這種方法，當(dāng)你給h1指定具體像素寬度的時(shí)候，要特別小心。這種方法也不推薦！
方法五：使用 letter-spacing
作為預(yù)防措施，并擴(kuò)展方法四，我們?yōu)槭裁床簧暾?qǐng)相當(dāng)大的letter-spacing來(lái)解決這個(gè)問(wèn)題？
<!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>
點(diǎn)擊查看演示
這似乎解決了這個(gè)問(wèn)題，但是在這里，我們又使用了一些CSS3的屬性。
出處：露兜博客
責(zé)任編輯：bluehearts
上一頁(yè) CSS創(chuàng)建豎排文字的簡(jiǎn)單方法 [1] 下一頁(yè) CSS創(chuàng)建豎排文字的簡(jiǎn)單方法 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) CSS創(chuàng)建豎排文字的簡(jiǎn)單方法 [2]
