使文字纵向排列的几种方法

一次与携程网Lucky老师交流，才发现工作了三年的自己，其实功底一点都不扎实，所以从现在开始，认真恩考，认真总结，不但要知其然，更要知其所以然。再次感谢点醒执迷不悟的我的Lucky老师！

下面分享一下使文字纵排列的几种方法：

第一种方法：”<br>”标签

<h1>
N
E
T
T
U
T
S
</h1>

这种方法没有说服力，不推荐使用；

第二种方法：Static Wrapping

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>

这种方法的弊端是，需要手工录入标签；

第三种方法：用Javascript

h1 span{ display:block;}

<h1>NETTUTS</h1>

var h1=document.getElementsByTagName('h1')[0];
h1.innerHTML='<span>'+h1.innerHTML.split('').join('</span><span>')+'</span>';

此种方法与第二种方法原理是一样的，好处是用js代替手工添加span标签。尽管如此，还是有一些弊端：
a、当js失效的时候，会影响页面布局；
b、当然完美的解决方法是，尽可能用css;

第四种方法：给Container定个宽度

h1{
    width:20px;
    font-size:20px;
    word-wrap:break-word;
}

<h1>NETTUTS</h1>
&nbsp;
<h1>Nettuts</h1>

word-wrap:break-word的一部分是CSS3规格,并不是在所有的浏览器兼容。
如果把除第一个字母外的其它字母小写的话，就有点悲剧了，套用别人的一句话就是”it’s too risky to play with pixel values.”；

第五种方法:使用letter-spacing

h1{
    width:50px;
    font-size:50px;
    word-wrap:break-word;
    letter-spacing:20px;/* Set large letter-spacing as precaution */
}

<h1>NETTUTS</h1>
<h1>Nettuts</h1>

这种方法貌似很好，不过有用到一点css3了

第六种方法:使用emS

h1 {
    width: 1em;
    font-size: 40px;
    letter-spacing: 40px; /* arbitrary large letter-spacing for safety */
    background:#CCC;
  }

<h1>N e t t u t s</h1>
<h1>N E T T U T S</h1>

据我所知,到目前为止,这是最好的,最符合跨浏览器的解决方案。

第七种方法:Whitespace

h1 {
    white-space:pre;
}

<h1>N e t t u t s</h1>
<h1>N E T T U T S</h1>

不爽的是，我们需要在编辑里所文字纵向排列；

拓展：纵向排列解决了，可否做到垂直居中呢？拭目以待！

11 thoughts on “使文字纵向排列的几种方法”

UECSS.COM