css控制豎直文字顯示


假如有一天,你把水平文字看膩味了......

我建議你不妨試試垂直文字顯示,就像這樣:

哈哈!

言歸正傳,怎么把一段話,垂直顯示呢?

方法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>

 

謝謝觀看!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM