css简单网页代码4种CSS⽂字竖排⽅法
4种CSS⽂字竖排⽅法，有时候，我们需要对⽹页某个区域的⽂字竖排，竖向排列，横向的当然⼤家都见惯了，对于竖排，⼀时间不到思路了，呵呵，其实和横排⼀样简单，下⾯介绍4种⽅法来实现CSS⽂字竖排。
  有时候，我们需要对⽹页某个区域的⽂字竖排，竖向排列，横向的当然⼤家都见惯了，对于竖排，⼀时间不到思路了，呵呵，其实和横排⼀样简单，下⾯介绍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> 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 = ElementsByTagName(‘h1′)[0];
h1.innerHTML = ‘<span>’ + h1.innerHTML.split(”).join(‘</span><span>’) + ‘</span>’; </script>
</body>
</html>
  四种⽅法介绍完了，究竟哪⼀种更适合您呢？⾃⼰⽐较下，根据你⾃⼰的实际情况选择吧，每种⽅法各有千秋。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。