古時(shí)候的書(shū)籍里面文字的書(shū)寫(xiě)方式都是從上到下從右向左書(shū)寫(xiě)的，我們可不可以在網(wǎng)頁(yè)上實(shí)現(xiàn)這種文字排版效果仗阅，雖然現(xiàn)在豎排在網(wǎng)頁(yè)上用的比較的少，但是我們可以在我們自己的個(gè)人網(wǎng)站或者博客介紹頁(yè)面用豎排來(lái)排版，使網(wǎng)頁(yè)樣式看起來(lái)更加的豐富和復(fù)古炉奴！
通過(guò)一些嘗試我找到了如下3中方式在網(wǎng)頁(yè)上豎排文字的方法，各有各的缺點(diǎn)和優(yōu)點(diǎn)克蚂，下面我們就來(lái)看看具體的方法和實(shí)現(xiàn)效果吧闺鲸！
方式1、css屬性float實(shí)現(xiàn)文字豎排
實(shí)現(xiàn)原理：把一短話的每一句放在一個(gè)div中埃叭，設(shè)置div的寬度和要顯示的字體的大小一樣（div的高度=字?jǐn)?shù)×字體大忻小）,div就變成了一個(gè)豎條每一行就只能顯示一個(gè)文字，第二個(gè)文字就會(huì)被擠到下一行赤屋，然后把div的float設(shè)置為right向右浮動(dòng)排列立镶。就達(dá)到了一首詩(shī)的豎排顯示。
代碼實(shí)現(xiàn):
<style>
*{
font-family:Georgia;
}
#content{
position:absolute;
width:1200px;
height:400px;
left:50%;
top:50%;
margin-top:-300px;
margin-left:-600px;
border:1px dashed #2f96b4;
padding-top:50px;
border-radius:20px;
}
#contentRemark{
position:absolute;
width:1200px;
height:300px;
left:50%;
top:56%;
margin-left:-600px;
padding-top:50px;
text-indent:2em;
font-size:20px;
line-height:2em;
}
.PoetryName{
font-size:xx-large;font-weight:bold;line-height:1.5em;width:1.5em;
float:right;font-size:36px;padding-top:40px;
padding-right:20px;
}
.PoetryPerson{
width:1.5em; float:right;line-height:2em;padding-top:70px;
font-size:18px;
color:#d3524e;
}
.PoetryContent{
width:1.5em; float:right;line-height:1.5em;padding-top:30px;
font-size:20px;
}
.PoetryContent:hover{
width:1.5em; float:right;line-height:1.5em;padding-top:30px;
font-size:20px;
cursor:pointer;
color:#d3524e;
}
</style>
<div id="content">
<div class="PoetryName">愛(ài)蓮說(shuō)</div>
<div style="width:1.5em; float:right;"> </div>
<div class="PoetryPerson">周 敦 頤 </div>
<div style="width:1.5em; float:right;"> </div>
<div class="PoetryContent">水陸草木之花 </div>
<div class="PoetryContent">可愛(ài)者甚蕃 </div>
<div class="PoetryContent">晉陶淵明獨(dú)愛(ài)菊 </div>
<div class="PoetryContent">自李唐來(lái) </div>
<div class="PoetryContent">世人甚愛(ài)牡丹 </div>
<div class="PoetryContent">予獨(dú)愛(ài)蓮之出淤泥而不染 </div>
<div class="PoetryContent">濯清漣而不妖 </div>
<div class="PoetryContent">中通外直 </div>
<div class="PoetryContent">不蔓不枝 </div>
<div class="PoetryContent">香遠(yuǎn)益清 </div>
<div class="PoetryContent"> 亭亭凈植 </div>
<div class="PoetryContent"> 可遠(yuǎn)觀而不可褻玩焉 </div>
<div class="PoetryContent">予謂菊花之隱逸者也 </div>
<div class="PoetryContent">牡丹花之富貴者也 </div>
<div class="PoetryContent">蓮花之君子者也 </div>
<div class="PoetryContent">噫菊之愛(ài) </div>
<div class="PoetryContent">陶后鮮有聞 </div>
<div class="PoetryContent"> 蓮之愛(ài) </div>
<div class="PoetryContent"> 同予者何人 </div>
<div class="PoetryContent"> 牡丹之愛(ài) </div>
<div class="PoetryContent"> 宜乎眾矣 </div>
<div style="margin-left:40px;margin-top:-20px;"></div>
</div>
通過(guò)float的方式實(shí)現(xiàn)文字豎排的demo
這種方式的優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：網(wǎng)頁(yè)文檔的書(shū)寫(xiě)和我們平時(shí)正常書(shū)寫(xiě)網(wǎng)頁(yè)時(shí)候一樣类早，可以為每一行設(shè)置不同的顯示樣式媚媒。
缺點(diǎn)：如果一行文字比較長(zhǎng)，沒(méi)有辦法換行~
方式2涩僻、css屬性transform:rotate實(shí)現(xiàn)文字豎排
實(shí)現(xiàn)原理：把一段話的每一個(gè)字放在一個(gè)span標(biāo)簽中(文字比較多可以通過(guò)js生成span)缭召，然后把這些span標(biāo)簽放在一個(gè)大的div容器中，將容器div順時(shí)針旋轉(zhuǎn)90度逆日，然后將容器中的span逆時(shí)針旋轉(zhuǎn)90度嵌巷，經(jīng)過(guò)兩次旋轉(zhuǎn)之后就達(dá)到了豎排文字的需求。
代碼實(shí)現(xiàn)：
<style>
.container {
position: absolute;
right: 300px;
margin-top: -200px;
width: 440px;
height: 1000px;
background-color: #FFFFFF;
padding-left: 36px;
font-family: "楷體";
border: 1px solid #999999;
margin-left: 100px;
overflow-y: scroll;
overflow-x:hidden;
-webkit-transform: rotate(90deg);
}
/**每一行的容器（豎列）**/
.container .items {
width: 445px;
height: 34px;
/*background-color: #EEEEEE;*/
/*border-left: 1px solid #999999;*/
}
.container .items .item {
display: inline-block;
width: 20px;
height: 20px;
font-size: 20px;
text-align: center;
line-height: 20px;
/*border-bottom: 1px solid #CCCCCC;*/
}
.container .items .item:hover {
background-color: pink;
cursor: pointer;
font-size: 22px;
}
.action1 {
width: 100px !important;
padding-left: 20px;
}
.rotate {
-webkit-transform: rotate(-90deg);
}
.style1 {
background-color: #ff6699;
color: #EEEEEE;
}
.style2 {
background-color: #4c98ce;
color: #EEEEEE;
}
#vertical div {
width: 1.5em;
float: right;
}
#vertical .title {
font-size: xx-large;
font-weight: bold;
line-height: 1em;
}
</style>
<div class="container">
<p> </p>
<div class="items">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item rotate" style="font-size:36px;font-weight:bold;">愛(ài)</div>
<div class="item"></div>
<div class="item rotate" style="font-size:36px;font-weight:bold;">蓮</div>
<div class="item"></div>
<div class="item rotate" style="font-size:36px;font-weight:bold;">說(shuō)</div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<p> </p>
</div>
<p class='action1'></p>
</div>
<!--引入jquery依賴-->
<script src="jquery.min.js"></script>
<script>
var arr = "水陸草木之花室抽，可愛(ài)者甚蕃晴竞。晉陶淵明獨(dú)愛(ài)菊。自李唐來(lái)狠半，世人甚愛(ài)牡丹噩死。予獨(dú)愛(ài)蓮之出淤泥而不染，濯清漣而不妖神年，中通外直已维，不蔓不枝，香遠(yuǎn)益清已日，亭亭凈植垛耳，可遠(yuǎn)觀而不可褻玩焉。予謂菊飘千，花之隱逸者也堂鲜；牡丹，花之富貴者也护奈；蓮缔莲，花之君子者也。噫霉旗！菊之愛(ài)痴奏，陶后鮮有聞蛀骇。蓮之愛(ài)，同予者何人读拆？牡丹之愛(ài)擅憔，宜乎眾矣！".split("");
var cHeight = $(".items").height();
var textHeight = $(".item").height();
var vCount = parseInt(cHeight / textHeight); //每列顯示的字?jǐn)?shù)
var textArr = [];
for (var i = 0; i < arr.length; i++) {
if (i % 20 == 0) {
textArr.push({
"hanzi": arr[i]
});
} else {
textArr[textArr.length - 1].hanzi += arr[i];
}
}
var html = "";
for (var j = 0; j < textArr.length; j++) {
html += "<div class='items'>";
var tempArr = textArr[j].hanzi.split("");
console.log(tempArr)
for (var k = 0; k < tempArr.length; k++) {
if(/[<>《》檐晕！*(^)$%~!@#$…&%￥—+=暑诸、。辟灰，屠列；‘’“”：·`]/.test(tempArr[k])){
html += "<div class='item' style='display:inline'>" + tempArr[k] + "</div>";
} else {
html += "<div class='item rotate'>" + tempArr[k] + "</div>";
}
}
html += "</div>";
}
$(".action1").after(html);
</script>
通過(guò)transform:rotate方式實(shí)現(xiàn)文字豎排的demo
這種方式的優(yōu)缺點(diǎn)：
**優(yōu)點(diǎn)：一大段文字也可以實(shí)現(xiàn)自動(dòng)換行。
**缺點(diǎn)：在具體位置實(shí)現(xiàn)換行控制比較麻煩伞矩，而且每個(gè)字寫(xiě)都要用一個(gè)span標(biāo)簽來(lái)包住。
方式3夏志、CSS屬性write-mode實(shí)現(xiàn)文字豎排
writing-mode直譯過(guò)來(lái)就是書(shū)寫(xiě)模式乃坤，它是為了控制文本布局而產(chǎn)生的，換句話說(shuō)它就是用來(lái)實(shí)現(xiàn)文字豎排的沟蔑，只不過(guò)文字豎排我們平時(shí)用的少湿诊，所以這個(gè)css屬性也不常見(jiàn)，發(fā)現(xiàn)這個(gè)屬性之前我還是在用一些其它方式（前兩中方法）實(shí)現(xiàn)文字的豎排瘦材。
writing-mode的屬性比較多厅须，詳細(xì)請(qǐng)看MDN,文字豎排使用到的屬性是writing-mode:vertical-rl從右向左豎排,writing-mode:vertical-lr從左向右豎排
代碼實(shí)現(xiàn)
<style>
#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;
}
</style>
<div id="content1">
<p style="letter-spacing:1em;font-size:20px;">水調(diào)歌頭 </p>
<p style="letter-spacing:.3em;font-size:18px;">蘇 軾</p>
<p>明月幾時(shí)有</p><p>把酒問(wèn)青天</p><p>不知天上宮闕</p><p>今夕是何年</p><p>我欲乘風(fēng)歸去</p><p>惟恐瓊樓玉宇</p><p>高處不勝寒</p><p>起舞弄清影</p><p>何似在人間</p><p> 轉(zhuǎn)朱閣</p><p>低綺戶</p><p>照無(wú)眠</p><p>不應(yīng)有恨</p><p>何事長(zhǎng)向別時(shí)圓</p><p>人有悲歡離合</p><p>月有陰晴圓缺</p><p>此事古難全</p><p>但愿人長(zhǎng)久</p><p>千里共蟬娟</p>
</div>
<hr>
<div id="content2">
<p style="letter-spacing:1em;font-size:20px;">水調(diào)歌頭 </p>
<p style="letter-spacing:.3em;font-size:18px;">蘇 軾</p>
<p>明月幾時(shí)有</p><p>把酒問(wèn)青天</p><p>不知天上宮闕</p><p>今夕是何年</p><p>我欲乘風(fēng)歸去</p><p>惟恐瓊樓玉宇</p><p>高處不勝寒</p><p>起舞弄清影</p><p>何似在人間</p><p> 轉(zhuǎn)朱閣</p><p>低綺戶</p><p>照無(wú)眠</p><p>不應(yīng)有恨</p><p>何事長(zhǎng)向別時(shí)圓</p><p>人有悲歡離合</p><p>月有陰晴圓缺</p><p>此事古難全</p><p>但愿人長(zhǎng)久</p><p>千里共蟬娟</p>
</div>
通過(guò)write-mode方式實(shí)現(xiàn)文字豎排的demo
這種方式的優(yōu)缺點(diǎn)：
**優(yōu)點(diǎn)：實(shí)現(xiàn)文字豎排的方式比較的方便和優(yōu)雅
**缺點(diǎn)：語(yǔ)法比較多，而且有兩套不同的規(guī)范（IE和css3）食棕！
注意事項(xiàng)：write-mode會(huì)改變一些原有的規(guī)則朗和，如我們隊(duì)上面的content1中的p設(shè)置行高，那么行高會(huì)變成左右行距離而不是上下行距簿晓。
本文如有誤眶拉，請(qǐng)不吝賜教！
如果你有更好的實(shí)現(xiàn)豎排的方式和方法憔儿，可以在評(píng)論區(qū)交流討論忆植。
