CSS 文字竖排技巧

实现网页文字竖排的方法有很多,先来看看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>

效果:

水调歌头
 
苏轼
 
明月几时有
把酒问青天
不知天上宫阙
今夕是何年
我欲乘风归去
又恐琼楼玉宇
高处不胜寒
起舞弄清影
何似在人间
 
转朱阁
低绮户
照无眠
不应有恨
何事长向别时圆
人有悲欢离合
月有阴晴圆缺
此事古难全
但愿人长久
千里共婵娟


代码规范,浏览器兼容性好,而且能很好地复制内容。博盈时代

原文:http://www.fufuok.com/css-vertical-text/

posted on 2009-05-27 14:54  fufuok  阅读(2574)  评论(0编辑  收藏  举报

导航