让文字纵向排列

一般来说，我们输入的文字都是横向排列的。那如何让文字纵向排列呢？像这样

方法一

直接贴图片，把文字以及相关样式交个设计师，让他帮忙做出一张图片，贴上即可。但这有点浪费人力。

方法二

使用
标签。

    会
场
导
航

如图中所示，使用br标签确实可以让文字纵向排列。不过未免太麻烦了点，若是有100个文字就需要使用99个
标签。所以这种方法果断抛弃之~~

方法三

将容器的宽度和文字的字体大小设置成一样

.demo{
  font-size:24px;
  width:24px;
}

   会场导航

此方法，在IE（8）、Chrome和Firefox上都有测试，该方法可行。

Chrome可以显示的最小字体是12px,Firefox可以显示的最小字体是1px，当设置的字体小于浏览器可以显示的最小字体时，文字无法显示。

经过测试得知，只要容器的宽度width小于font-size的二倍，文字就能纵向排列（每行一个文字）。

若要让每列2个文字，则容器的宽度width>=font-size的二倍， 容器的宽度width

缺点：当有多列文字时，该方法就没什么用了。

方法四

使用writing-mode属性

writing-mode：horizontal-tb | vertical-rl | vertical-lr 

分别是：文字正常显示；文字纵向排列，从右至左； 文字纵向排列，从左至右

         

.write-mode{
  height:100px;
  writing-mode:vertical-rl;
}

   怎么回事，明明很简单啊，不应该啊怎么会这样呢，我的神啊我的神啊，

总结

这4种方法中，方法四（writing-mode）是最好的，浏览器兼容性不错，实现也简单