writing-mode属性用法介绍

快乐打工仔 分类:实例代码

此属性用来设置或检索对象的内容块固有的书写方向。

作为IE的私有属性之一,IE5.5率先实现了 writing-mode ,后期被w3c采纳成标准属性;

属性效果不能被累加使用。例如,父对象的此属性值设为vertical-rl ,子对象再设置该属性将不起作用,仍应用父对象的设置。

适用于除display属性定义为table-row-group | table-column-group | table-row | table-column之外的所有元素

对应的脚本特性为writingMode

语法结构:

writing-mode:horizontal-tb | vertical-rl | vertical-lr

参数解析:

(1).horizontal-tb:水平方向自上而下的书写方式。即 left-right-top-bottom。

(2).vertical-rl:垂直方向自右而左的书写方式。即 top-bottom-right-left。

(3).vertical-lr:垂直方向自左而右的书写方式。即 top-bottom-left-right

浏览器兼容:

前端教程

代码实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
body,html{
  background-color:#fff;
}
div{
  writing-mode: horizontal-tb;
  width:100px;
  height:150px;
}
</style>
</head>
<body>
<div>
前端教程网欢迎您,只有努力奋斗才会有美好的未来,本站url地址是pipipi.net
</div>
</body>
</html>

这是文本默认的书写方向,也就是水平从上到下。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
body,html{
  background-color:#fff;
}
div{
  writing-mode: vertical-rl;
  width:100px;
  height:150px;
}
</style>
</head>
<body>
<div>
前端教程网欢迎您,只有努力奋斗才会有美好的未来,本站url地址是pipipi.net
</div>
</body>
</html>

上面的代码设置设置文本垂直由右向左。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
body,html{
  background-color:#fff;
}
div{
  writing-mode: vertical-lr;
  width:100px;
  height:150px;
}
</style>
</head>
<body>
<div>
前端教程网欢迎您,只有努力奋斗才会有美好的未来,本站url地址是pipipi.net
</div>
</body>
</html>

上面的代码设置设置文本垂直由左向右。

回复

我来回复
  • 暂无回复内容