本文解决的问题：
仅使用CSS，让网页上的文字能竖排显示。
网页上的文字一般都是横着从左往右显示，如果再加一点CSS样式，可以做到从左往右或从右往左显示（CSS文本属性，direction: ltr | rtl | inherit），但其实也只是把一段文字放到左侧或者右侧，指定 direction:rtl 并不会将这段文字倒过来显示（即无法形成从右往左阅读的顺序）；但我们往往会有这样的需求，希望文字能以竖排的形式呈现，就像书法中从上往下、从右往左的书写顺序一样，亦或是你想为网页上的图片添加浮动的文字效果，比如配两行诗句，横排的文字并不能满足需求，竖排的诗句则更优雅一些。
解决思路：为容纳文字的标签添加一个足够窄的宽度，让文字自动换行，下面的工作都是围绕以上两点：宽度足够窄、保证自动换行。
1. 足够窄的宽度，足够大的字体
div#width-sm{
width: 0px;
font-size: 20px;
}
<div id="width-sm">这是一句话</div><div id="width-sm">letter</div>
实际的表现如下，虽然已经为div定义了足够小的width，英文的显示还是不正确，因为浏览器将单词识别为一个整体，在没有收到允许换行的提示时，默认在一行显示。
2. 既然英文单词整个展示，把单词拆开呢？使用CSS3的word-warp: break-word允许长单词换行显示
div#break-word{
width: 0px;
font-size: 20px;
word-wrap:break-word;
}
<div id="break-word">这是一句话</div><div id="break-word">letter</div>
实际的表现如下，允许长单词换行的策略十分成功：
3. 由2得知，break-word会使浏览器将长单词拆分成多行，通过使两个字母间距足够大，可以确保一个字母就换行，设置letter-spacing以达到目的，扩展如下：
div#letter-spacing{
width: 0px;
font-size: 20px;
word-wrap:break-word;
letter-spacing: 30px;
}
div#break-word{
width: 1em;//width: 0px;
font-size: 20px;
letter-spacing: 30px;
}
<div id="letter-spacing">这是一句话</div><div id="letter-spacing">letter</div><!-- 不换行 --><div id="letter-spacing">l e t t e r</div><!--换行-->