假如有一天,你把水平文字看膩味了......
我建議你不妨試試垂直文字顯示,就像這樣:
我
是
豎
直
顯
示
的
;
哈哈!
言歸正傳,怎么把一段話,垂直顯示呢?
方法1:
//把下面代碼另存為html試試就知道了;
//少些了些代碼,適合有基礎的同學觀看,不會再問我;
h1 span { display: block; }
<h1>
<span> N </span>
<span> E </span>
<span> T </span>
<span> T </span>
<span> U
<span> T </span>
<span> S </span>
</h1>
方法2:
//把下面代碼另存為html試試就知道了;
<!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>
方法3:
//把下面代碼另存為html試試就知道了;
<!DOCTYPE html>
<html>
<head>
<title>豎向排列的文字</title>
<style>
h1 { width: 50px; font-size: 50px; word-wrap: break-word; letter-spacing: 20px; } </style> </head>
<body>
<h1>豎向排列的文字</h1>
</body>
</html>
方法4:
//javascript實現的,復雜化了,不過可以裝逼嘛
<!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>
謝謝觀看!
