购物车
登陆 / 注册
微信扫码登陆

writing-mode

writing-mode
writing-mode 属性定义了文本在水平或垂直方向上如何排布。
编辑:前端控 前端控 更新时间:2019-01-28 09:10:07

CSS writing-mode 属性


含义

writing-mode 属性定义了文本在水平或垂直方向上如何排布。

语法格式如下:

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

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

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

vertical-lr:垂直方向内内容从上到下,水平方向从左到右

sideways-rl:内容垂直方向从上到下排列

sideways-lr:内容垂直方向从下到上排列


浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性1.gif2.gif3.gif4.gif5.gif
writing-mode8.06.041.05.115

表格中展示了不同的书写模式:

实例

table, td, th {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    width: 100%;
}
.example.Text1 span, .example.Text1 {
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
}

.example.Text2 span, .example.Text2 {
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}

.example.Text3 span, .example.Text3 {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
}

.example.Text4 span, .example.Text4 {
  writing-mode: sideways-lr;
  -webkit-writing-mode: sideways-lr;
  -ms-writing-mode: sideways-lr;
}

.example.Text5 span, .example.Text5 {
  writing-mode: sideways-rl;
  -webkit-writing-mode: sideways-rl;
  -ms-writing-mode: sideways-rl;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
文章列表
教程文档
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号