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>
上面的代码设置设置文本垂直由左向右。