文字垂直排版

方法一 : <br> Tags

此方法尽管不推荐,如果没有别的方法可用时,直接在每个字母或者是汉字的后面添加<br />标签,就可以实现文字竖排效果了。

1
<h1>R<br/>A<br />I<br/>N<br/>B<br/>O<br/>W</h1>

方法二:元素包裹

此方法,需要<span>元素包裹每个字母或者是汉字,然后将其 display 设置为 block ,从而使他们独立成行。

1
#method_b span{ display:block;}
1
2
3
4
5
6
7
8
9
<h1 id="method_b">  
    <span>R</span>  
    <span>A</span>  
    <span>I</span>  
    <span>N</span>  
    <span>B</span>  
    <span>O</span>  
    <span>W</span>  
</h1>

这个解决方案的问题是:给我们带来了多余的标签,还得给每个字母进行手工操作的包装。

方法三:使用JavaScript

我最初的反应是想用JavaScript动态添加的span标签。这样,我们在方法避开上述两个问题。

1
#method_c span{ display:block;}
1
2
3
4
5
6
 <h1 id="method_c"> RAINBOW </h1>
 <script type="text/javascript">  
   // var h1 = document.getElementsByTagName('h1')[0];  
   var h1=document.getElementById("method_c");
   h1.innerHTML = '<span>' + h1.innerHTML.split('').join('</span><span>') + '</span>';  
 </script>

方法四:定宽

1
2
3
4
5
#method_d{
	width: 50px;  
    font-size: 50px;  
    word-wrap: break-word;  /*内容将在边界内换行*/
}
1
<h1 id="method_d">RAINBOW</h1>

方法五:letter-spacing (字符间距)

1
2
3
4
5
6
#method_e{
    width: 50px;  
    font-size: 50px;  
    word-wrap: break-word;  /*内容将在边界内换行*/
    letter-spacing: 20px; /* Set large letter-spacing as precaution */  	
}
1
<h1 id="method_e"> R A I N B O W </h1>

方法六: word-wrap(自动换行)

1
2
3
4
#method_f{width: 1em;  
   font-size: 40px;  
   letter-spacing: 40px; /* arbitrarily large letter-spacing for safety */  
}
1
<h1 id="method_f"> R A I N B O W </h1>

方法七: white-space(处理元素内的空白)

1
#method_g{white-space: pre; }
1
2
3
4
5
6
7
8
9
<h1 id="method_g">
R
A
I
N
B
O
W
</h1>

空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

演示

站点统计