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 { 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 { 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>

谢谢观看!

原文地址:https://www.cnblogs.com/lwj820876312/p/7485187.html