文字竖排demo3

文字竖排demo3-通过write-mode方式实现

by wu huan

HTML

<div id="content1">
 <h2 style="letter-spacing:1em;">爱莲说 </h2>
    <h3 style="letter-spacing:.3em;">周敦颐</h3>
    <p>水陆草木之花　</p><p>可爱者甚蕃　</p><p>晋陶渊明独爱菊　</p><p>自李唐来　</p><p>世人甚爱牡丹　</p><p>予独爱莲之出淤泥而不染　</p><p>濯清涟而不妖　</p><p>中通外直　</p><p>不蔓不枝　</p><p>香远益清　</p><p> 亭亭净植　</p><p> 可远观而不可亵玩焉　</p><p>予谓菊花之隐逸者也　</p><p>牡丹花之富贵者也　</p><p>莲花之君子者也　</p><p>噫菊之爱　</p><p>陶后鲜有闻　</p><p> 莲之爱　</p><p> 同予者何人　</p><p> 牡丹之爱　</p><p> 宜乎众矣　</p>
</div>
<hr>
<div id="content2">
	 <h2 style="letter-spacing:1em;">爱莲说 </h2>
    <h3 style="letter-spacing:.3em;">周敦颐</h3>
    <p>水陆草木之花　</p><p>可爱者甚蕃　</p><p>晋陶渊明独爱菊　</p><p>自李唐来　</p><p>世人甚爱牡丹　</p><p>予独爱莲之出淤泥而不染　</p><p>濯清涟而不妖　</p><p>中通外直　</p><p>不蔓不枝　</p><p>香远益清　</p><p> 亭亭净植　</p><p> 可远观而不可亵玩焉　</p><p>予谓菊花之隐逸者也　</p><p>牡丹花之富贵者也　</p><p>莲花之君子者也　</p><p>噫菊之爱　</p><p>陶后鲜有闻　</p><p> 莲之爱　</p><p> 同予者何人　</p><p> 牡丹之爱　</p><p> 宜乎众矣　</p>
</div>

CSS

#content1{
		width:900px;
		height:200px;
		-webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    padding-top:40px;
    font-size:16px;
	}
  
  	#content2{
		width:900px;
		height:200px;
		-webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    padding-top:40px;
    font-size:16px;
	}