方法一 : <br> Tags
此方法尽管不推荐,如果没有别的方法可用时,直接在每个字母或者是汉字的后面添加<br />标签,就可以实现文字竖排效果了。
1
| <h1>R<br/>A<br />I<br/>N<br/>B<br/>O<br/>W</h1> |
<h1>R<br/>A<br />I<br/>N<br/>B<br/>O<br/>W</h1>
方法二:元素包裹
此方法,需要<span>元素包裹每个字母或者是汉字,然后将其 display 设置为 block ,从而使他们独立成行。
1
| #method_b span{ display:block;} |
#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> |
<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;} |
#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> |
<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; /*内容将在边界内换行*/
} |
#method_d{
width: 50px;
font-size: 50px;
word-wrap: break-word; /*内容将在边界内换行*/
}
1
| <h1 id="method_d">RAINBOW</h1> |
<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 */
} |
#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> |
<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 */
} |
#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> |
<h1 id="method_f"> R A I N B O W </h1>
方法七: white-space(处理元素内的空白)
1
| #method_g{white-space: pre; } |
#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> |
<h1 id="method_g">
R
A
I
N
B
O
W
</h1>
空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
演示
博主好久都没写文章了吧,我也好久没来了 哈哈