网页竖排文字的实现——只需要CSS

本文解决的问题：

仅使用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;
}

4. 除了使用px指定width，还可以使用em，1em表示容器宽度和字体大小一致，并在字母之间加空格，这样也能确保一行只能放下一个字（母）

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><!--换行-->