2009-05-27

CSS 文字竖排

2+

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

效果:

水调歌头

 

苏轼

 

明月几时有

把酒问青天

不知天上宫阙

今夕是何年

我欲乘风归去

又恐琼楼玉宇

高处不胜寒

起舞弄清影

何似在人间

 

转朱阁

低绮户

照无眠

不应有恨

何事长向别时圆

人有悲欢离合

月有阴晴圆缺

此事古难全

但愿人长久

千里共婵娟



不错吧,代码规范,浏览器兼容性好,而且能很好地复制内容。

本文有 2 篇评论 ↓↓

  1. CSS 文字竖排技巧...

    实现网页文字竖排的方法有很多,先来看看CSS样式表中提供的两种文字竖排的方法:
    writing-mode(IE5.5 专有属性)
    语法:
    writing-mode:lr-tb|tb......

  2. 这个不错。有用。