文字竖排这在网页浏览中是非主流的，但做为网页设计工作的朋友们。需要了解用CSS控制文字的排列方向，变成竖向排列。不是那种排版时候人为的竖排，这个是由CSS控制，而且是区域自适应，这是很有必要的。下面老鼠工作室就向大家介绍用CSS实现文字竖排效果的代码，先看以下代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS实现竖排文字效果</title>
</head>
<body>
<div style="layout-flow:vertical-ideographic">
北京上云 老鼠工作室 资深的北京网站<br />建设公司,专注高端网站建设,高端网页设计<br />的公司,上云设计作品屡获殊荣,<br />曾被媒体称为最具设计实力的网页设计工作室。
</div>
</body>
</html>
layout-flow 版本：IE5.5+专有属性 继承性：有
语法：
layout-flow : horizontal | vertical-ideographic
layout-flow参数：
horizontal : 对象中的内容自左边流入。下一行在前一行下面。这个值适于拉丁语系
vertical-ideographic : 对象中的内容自上而下流入，下一行在前一行左面。这个值适于亚洲语系
layout-flow说明：
设置或检索对象内文本的流动和方向。
当此属性值发生变化时，text-align属性与vertical-align属性的作用也将发生变化。
对应的脚本特性为layoutFlow。请参阅我编写的其他书目。
示例：
div { layout-flow : horizontal; }
古典竖排文字效果其实实现这一效果还有非常简单的方法，我们使用CSS就能实现。CSS实现文字竖排显示
<DIV style="WRITING-MODE: tb-rl; TEXT-ALIGN: left">
<DIV style="LINE-HEIGHT: 1.5em; LETTER-SPACING: 0.2em;">
北京上云·北京高端网站建设专业公司-获奖的原创网页设计</DIV>
</DIV>
老鼠工作室博客
北京上云,资深的网站建设公司,专注高端网站建设
CSS实现文字竖排效果代码
分类: CSS样式 浏览: 日期: 2010年3月1日
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
- 评论:(0)
发表评论 点击这里获取该日志的TrackBack引用地址