实现网页文字竖排的方法有很多,先来看看CSS 样式表中提供的两种文字竖排的方法:
writing-mode (IE5.5+专有属性)
语法:
writing-mode : lr-tb | tb-rl
参数:
lr-tb : 左-右,上-下
tb-rl : 上-下,右-左
另一种是用:
layout-flow (IE5.5+专有属性)
语法:
layout-flow : horizontal | vertical-ideographic
参数:
horizontal : 对象中的内容自左边流入。下一行在前一行下面。这个值适于拉丁语系
vertical-ideographic : 对象中的内容自上而下流入,下一行在前一行左面。这个值适于亚洲语系
但这两种方法都只是 IE 支持,而且效果也不太好控制。除非之外,还可以用 <BR /> 或使用图片来实现文字竖排。
下面这种方法是比较好的,推荐使用:
<style> #vertical div { width:1.5em; float:right; } #vertical .title { font-size:xx-large; font-weight:bold; line-height:1em; } </style> <div id="vertical"> <div class="title">水调歌头</div> <div> </div> <div>苏轼</div> <div> </div> <div>明月几时有</div> <div>把酒问青天</div> <div>不知天上宫阙</div> <div>今夕是何年</div> <div>我欲乘风归去</div> <div>又恐琼楼玉宇</div> <div>高处不胜寒</div> <div>起舞弄清影</div> <div>何似在人间</div> <div> </div> <div>转朱阁</div> <div>低绮户</div> <div>照无眠</div> <div>不应有恨</div> <div>何事长向别时圆</div> <div>人有悲欢离合</div> <div>月有阴晴圆缺</div> <div>此事古难全</div> <div>但愿人长久</div> <div>千里共婵娟</div> </div>
效果:
水调歌头
苏轼
明月几时有
把酒问青天
不知天上宫阙
今夕是何年
我欲乘风归去
又恐琼楼玉宇
高处不胜寒
起舞弄清影
何似在人间
转朱阁
低绮户
照无眠
不应有恨
何事长向别时圆
人有悲欢离合
月有阴晴圆缺
此事古难全
但愿人长久
千里共婵娟
代码规范,浏览器兼容性好,而且能很好地复制内容。博盈时代