大鹏天空™

古诗大家都看过吧~有时为了突出一点效果，设计师喜欢将文字的版面改变一下，其中竖排显示的文字还是很有用的，其中主要牵扯到的是CSS的两个文字属性~分别是layout-flow和writing-mode，而vertical-align也是针对垂直显示文字的一种属性，
自己看一下，以后用到的时候就不愁了哦!

layout-flow
<style> #idDIV{width:100%;height:90px;background-color:thistle;padding:8px;layout-flow:vertical-ideographic; text-align:left;vertical-align:auto;} #idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;} </style> <script> function rdl_change(e){ var oCodeDiv=document.all("idCodeDiv"); var oDiv=document.all("idDiv"); with (document.all("idSel1")) var sValue1=options[selectedIndex].value; with (document.all("idSel2")) var sValue2=options[selectedIndex].value; with (oDiv.style) { layoutFlow=sValue1;verticalAlign=sValue2; } oCodeDiv.innerText="layout-flow : "+sValue1+"\r\n"+"vertical-align : "+sValue2+" ;"; } </script> <table border=0 cellpadding=0 cellspacing=0 width=100% height=90><tr> <td id=idDIV>请您用下面的按钮选择这段文字的<b> layout-flow </b>和<b> vertical-align </b>属性的值。</td> </tr></table> <br> <table><tr><td> <select id="idSel1" onchange="rdl_change();"> <option value="horizontal">---layout-flow--- <option value="horizontal">horizontal <option value="vertical-ideographic" selected>vertical-ideographic </select> </td><td> <select id="idSel2" onchange="rdl_change();"> <option value="auto">---vertical-align--- <option value="baseline">baseline <option value="sub">sub <option value="super">super <option value="top">top <option value="text-top">text-top <option value="middle">middle <option value="bottom">bottom <option value="text-bottom">text-bottom <option value="auto">auto </select> </td></tr></table> <div id=idCodeDiv>layout-flow : vertical-ideographic ;<br>vertical-align : auto ;</div>

writing-mode
<style> #idDIV{width:100%;height:90px;background-color:#87CEEB;padding:8px;writing-mode:tb-rl; text-align:left;} #idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;} </style> <script> function rdl_change(e){ var oCodeDiv=document.all("idCodeDiv"); var oDiv=document.all("idDiv"); with (document.all("idSel1")) var sValue1=options[selectedIndex].value; with (document.all("idSel2")) var sValue2=options[selectedIndex].value; with (oDiv.style) { writingMode=sValue1;textAlign=sValue2; } oCodeDiv.innerText="writing-mode : "+sValue1+"\r\n"+"text-align : "+sValue2+" ;"; } </script> <div id=idDIV>请您用下面的按钮选择这段文字的 writing-mode 和 text-align 属性的值。看一看会发生什么，然后您就会明白他们的意义。</div> <br> <table><tr><td> <select id="idSel1" onchange="rdl_change();"> <option value="lr-tb">---writing-mode--- <option value="lr-tb">lr-tb <option value="tb-rl" selected>tb-rl </select> </td><td> <select id="idSel2" onchange="rdl_change();"> <option value="left">---text-align--- <option value="left">left <option value="right">right <option value="center">center <option value="justify">justify </select> </td></tr></table> <div id=idCodeDiv>writing-mode : tb-rl ;<br>text-align : left ;</div>