CSS writing-mode 属性

CSS writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置时,应在根元素上设置它(对于 HTML 文档应该在 html 元素上设置)。


实例

规定水平还是垂直地排布文本行:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p.test1 {
  6. writing-mode: horizontal-tb;
  7. }
  8. p.test2 {
  9. writing-mode: vertical-rl;
  10. }
  11. span.test2 {
  12. writing-mode: vertical-rl;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <h2>writing-mode 属性</h2>
  18. <p class="test1">使用默认 writing-mode 的一些文本。</p>
  19. <p>文本中带有 <span class="test2">vertical-rl</span> 模式的 span 元素。</p>
  20. <p class="test2">一些带有 vertical-rl 模式的文本</p>
  21. </body>
  22. </html>

定义和用法

writing-mode 属性规定水平还是垂直地排布文本行。

默认值:horizontal-tb
继承:
动画制作:不支持。请参阅:动画相关属性
版本:CSS3
JavaScript 语法:object.style.writingMode="vertical-rl"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性
writing-mode48.012.041.011.035.0

CSS 语法

  1. writing-mode: horizontal-tb|vertical-rl|vertical-lr;
属性值
描述
horizontal-tb让内容从左到右水平流动,从上到下垂直流动。
vertical-rl让内容从上到下垂直流动,从右到左水平流动。
vertical-lr让内容从上到下垂直流动,从左到右水平流动。

相关页面

CSS 教程:CSS 文本效果

分类导航