视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
详解css的writing-mode文字排版属性的用法
2020-11-27 18:52:00 责编:小采
文档


语法:

writing-mode : lr-tb | tb-rl
/* 关键字值 */ 
writing-mode: horizontal-tb; /* 默认值 */ 
writing-mode: vertical-rl; 
writing-mode: vertical-lr; 
/* 全局值-关键字inherit IE8+,initial和unset IE13才支持 */ 
writing-mode: inherit; 
writing-mode: initial; 
writing-mode: unset;

lr-tb :  默认值。对象中的内容在水平方向上从左向右流入,后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的

tb-rl :  上-下,右-左。对象中的内容在垂直方向上从上向下流入,自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的,半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的

说明:

设置或检索对象的内容块固有的书写方向。西方语言确省的是左-右,上-下的书写方式。但是亚洲语言常有上-下,右-左的书写方式。

当此属性值发生变化时, text-align属性与vertical-align 属性的作用也将发生变化。

对于下列元素来说,样式表属性不可继承:

BUTTON CAPTION INPUT INPUT type=button INPUT type=file INPUT type=password INPUT type=reset INPUT type=submit INPUT type=text ISINDEX OPTION TEXTAREA

此属性效果不会被累积作用。例如,假如父对象的此属性值设为 tb-rl ,子对象的此属性值设为 tb-rl 不会导致子对象的旋转。

假如对象的 writing-mode 属性设置和它的父对象不一样则其将获得自己的布局。那样一个对象的宽度是通过使用它第一个有布局的父对象的高度而确定的。

当你使用具有不同 writing-mode 属性值的对象时,给每一个对象指定确定的尺寸能够让你更好的整体控制它们的布局。

此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

对应的脚本特性为 writingMode 。

文字的竖排版示例:

.verticle-mode { 
 writing-mode: tb-rl; 
 -webkit-writing-mode: vertical-rl; 
 writing-mode: vertical-rl; 
} 
/* IE7比较弱,需要做点额外的动作 */ 
.verticle-mode { 
 *width: 120px; 
} 
.verticle-mode h4, 
.verticle-mode p { 
 *display: inline; 
 *writing-mode: tb-rl; 
} 
.verticle-mode h4 { 
 *float:rightright; 
}

html如下下:

<div class="verticle-mode"> 
 <h4>咏柳</h4> 
 <p>碧玉妆成一树高,<br>万条垂下绿丝绦。<br>不知细叶谁裁出,<br>二月春风似剪刀。</p> 
</div>

我们就可以看到古诗文的竖排了!

下载本文
显示全文
专题