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

本文解决的问题:

仅使用CSS,让网页上的文字能竖排显示。

网页上的文字一般都是横着从左往右显示,如果再加一点CSS样式,可以做到从左往右或从右往左显示(CSS文本属性,direction: ltr | rtl | inherit),但其实也只是把一段文字放到左侧或者右侧,指定 direction:rtl 并不会将这段文字倒过来显示(即无法形成从右往左阅读的顺序);但我们往往会有这样的需求,希望文字能以竖排的形式呈现,就像书法中从上往下、从右往左的书写顺序一样,亦或是你想为网页上的图片添加浮动的文字效果,比如配两行诗句,横排的文字并不能满足需求,竖排的诗句则更优雅一些。


解决思路:为容纳文字的标签添加一个足够窄的宽度,让文字自动换行,下面的工作都是围绕以上两点:宽度足够窄、保证自动换行。

1. 足够窄的宽度,足够大的字体

div#width-sm{
	width: 0px;
	font-size: 20px;
}
这是一句话
letter

实际的表现如下,虽然已经为div定义了足够小的width,英文的显示还是不正确,因为浏览器将单词识别为一个整体,在没有收到允许换行的提示时,默认在一行显示。

网页竖排文字的实现——只需要CSS_第1张图片


2. 既然英文单词整个展示,把单词拆开呢?使用CSS3的word-warp: break-word允许长单词换行显示

div#break-word{
	width: 0px;
	font-size: 20px;
	word-wrap:break-word;
}
这是一句话
letter

实际的表现如下,允许长单词换行的策略十分成功:

网页竖排文字的实现——只需要CSS_第2张图片


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;
}
这是一句话
letter
l e t t e r


你可能感兴趣的:(Web前端)