废话不多说,看效果;
实例一:
实现这样的效果: 文字是 从上而下,从左向右。显示
属性:
-webkit-writing-mode:vertical-rl;
writing-mode:lr-tb ;
html code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字竖排效果</title>
</head>
<style>
.e_content h2.myGift{ width: 80px; height: auto; float: left; display: block; font-size: 48px; color: #000000; text-align: center; margin: 30% 30px 10% 70px;}
.e_content_mian { width:150px; float: left; margin: 100px 20px 100px 0px; height: 480px;background: #00FF00; }
.e_content_mian p{-webkit-writing-mode:vertical-lr;writing-mode:tb-rl;writing-mode:vertical-lr; font-size:24px;color: #000000; padding: 0px 0px; text-align: justify;}
</style>
<body>
<div class="e_content_mian">
<p>
礼物是最好的表达友谊的一种物品。礼物是最好的表达友谊的一种物品。
礼物是最好的表达友谊的一种物品。礼物是最好的表达友谊的一种物品。
</p>
</div>
</body>
</html>
实例二:
效果图
实现这样的效果: 文字是 自上而下, 从右向左
属性:
-webkit-writing-mode:vertical-rl;
writing-mode:tb-rl;
html code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字竖排显示</title>
<style>
.f_mian{ width:300px ; height: 450px; float: right; margin: 0px 50px; overflow: auto;}
.f_mian p{
-webkit-writing-mode:vertical-rl;
writing-mode:tb-rl;
writing-mode:vertical-rl;
text-align: justify;
font-size:24px;
color: #000000;
padding: 0px 0px;
display: block; float: right;}
</style>
</head>
<body>
<div class="f_mian">
<p>
礼物是最好的表达友谊的一种物品。礼物是最好的表达友谊的一种物品。
礼物是最好的表达友谊的一种物品。礼物是最好的表达友谊的一种物品。
礼物是最好的表达友谊的一种物品。礼物是最好的表达友谊的一种物品。
</p>
</div>
</body>
</html>
取值
Horizontal-tb:水平方向自上而下的书写方式。即。Left-right-top-bottom(类似IE私有值 lr-tb)
Vertical-rl:垂直方向自右而左的书写方式。即top-bottom-right-left(类似IE私有值tb-rl)
Vertical-lr:垂直方向自左而右边的书写方式。即top-bottom-left-right
Lr-tb:左-右,上-下。对象中的内容在水平方向上从左向右流入。后一行在前一行的下面。所有的字形都是竖直向上的。
tb-rl : 上-下,右-左。对象中的内容在垂直方向上从上向下流入,自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的,半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的
1. text-align:justify
text-align:jusify实现文本两端对齐布局,兼容IE
对于text-align我们再熟悉不过了,可是它有个justify属性,平时很少用到,就鲜为人知了。justify是一种文本靠两边布局方式,一般应用于书刊杂志排版;合理运用text-align:justify有时会省去很多开发的时间。
使用text-align:justify时需要结合另外一个IE私有属性:text-justify:inter-ideograph ;
text-justify语法:
text-justify : auto |inter-word | newspaper |distribute | distribute-all-lines | inter-ideograph
text-justify参数
auto:允许浏览器用户代理确定使用的两端对齐法则;
inter-word:通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效;
newspaper :通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式;
distribute:处理空格很像newspaper,适用于东亚文档。尤其是泰国;
distribute-all-lines:两端对齐行的方式与distribute相同,也同样不包含两段对齐段落的最后一行。适用于表意字文档;
inter-ideograph:为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格。
因此我们要把text-align:justify;text-justify:inter-ideograph;放在一起来兼容IE浏览器:
参考学习网站:
http://www.zhihu.com/question/37423363
http://www.jb51.net/css/110976.html
http://www.divcss5.com/wenji/w596.shtml?jdfwkey=xqmyq2
多看看这些网站,有助于了解css文字竖排效果。
记笔记是个很好的习惯,有助于学习。希望能帮助到你,