文字纵向排列

这是cherry在uecss.com里总结的文字纵排列方法，开头一段话很特别，摘来给大家看下：

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

由此我们可以推测出来携程网这次给cherry的面试题其中一道是：

关于文字纵向排列你能写出几种方法？
考题背面扩展问题：纵向排列后，可否做到垂直居中呢？

之所以如此猜测，因为我也有次去携程面试的经历，全场笔试一张纸三个问题，纸张背面是扩展问法，在前面的基础上思考更进一步；
我遇到的问题，发博文一篇：携程旅游网前端开发面试题，现已整合进前端解决方案，详见：自适应两列布局。

使文字纵排列的几种方法：与cherry的总结有改动

1. <br> 标签
2. block每个字
3. 用 JavaScript
4. 限制Container容器宽度
5. 使用break-word;
6. 使用letter-spacing
7. Whitespace

<div class="box">
    文<br>
    字<br>
    纵<br>
    排<br>
</div>
这种方法最易想到，也最常用

<div class="box block">
    <span>文</span>
    <span>字</span>
    <span>纵</span>
    <span>排</span>
</div>
这种方法的弊端是，需要手工录入标签

<div id="J_vertext" class="box">文字纵排</div>
此种方法与前者原理一样，好处是用js代替手工添加span标签。

var J_vertext=document.getElementById('J_vertext');
J_vertext.innerHTML='<span>'+J_vertext.innerHTML.split('').join('</span><span>')+'</span>';

尽管如此，还是有一些弊端：

• 当js失效的时候，会影响页面布局；
• 当然完美的解决方法是，尽可能用css;

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

word-wrap:break-word的一部分是CSS3规格,并不是在所有的浏览器兼容。

如果把除第一个字母外的其它字母小写的话，就有点悲剧了，套用别人的一句话就是"it's too risky to play with pixel values."；

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

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

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

不很好，遇到标点标准浏览器需要和文字中间要加空格才能正常显示(默认标点不会显示在一行的开头)，而IE直接无视标点符号了。

.pre{
    white-space:pre; /* 或 pre-wrap */
}

不爽的是，我们需要在编辑里所文字纵向排列，编辑控制很不方便

扩展：

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