文字垂直排版

By Rainbow on // HTML / CSS // 4048 Views+ // (1) Comments

方法一 ： <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> 标签。

演示

分享到： 更多

文章评论 已经有 1 条评论！

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

站点统计