4种CSS文字竖排方法

最新推荐文章于 2024-04-22 16:07:30 发布

weixin_33730836

最新推荐文章于 2024-04-22 16:07:30 发布

阅读量1.5k

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/jack088/blog/612939

版权

2019独角兽企业重金招聘Python工程师标准>>>

有时候，我们需要对网页某个区域的文字竖排，竖向排列，横向的当然大家都见惯了，对于竖排，一时间找不到思路了，呵呵，其实和横排一样简单，下面介绍4种方法来实现CSS文字竖排。

第一种方法：将需要竖排显示的字符放在span中，在CSS中设置span的display属性为block，不过不推荐使用这种方法，因为有些麻烦，代码如下：

h1 span { display: block; } 
<h1> 
<span> N </span> 
<span> E </span> 
<span> T </span> 
<span> T </span> 
<span> U </span> 
<span> T </span> 
<span> S </span> 
</h1>

第二种方法A：同样使用CSS，在需要竖向显示的地方，强制定义显示区域的宽度，这样字符会自动竖向排列：请看具体代码：

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

第二种方法B：同样是使用CSS，推荐使用这种方法，觉得这个方法兼容性也好，而且代码简洁，字符也容易控制。

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

第三种方法：使用JavaScript（不推荐，其实这么一个小小的功能，动用JS就太不划算了，毕竟我们有比这更有效、更简洁的办法）

<!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://my.oschina.net/jack088/blog/612939