说到数字排列，我们经常在设计师安排文案时非常漂亮。文本可以朝各个方向设计。事实上，我们也可以在前端开发技术中实现这一点。今天，我们将学习如何使用代码在不同方向实现文本的排版。
首先，让我们来看看图片，如下：
文字按不同方向排列，我们可以看到。那怎么操作呢？
writing-mode 属性定义
writing-mode 属性定义了文本水平或垂直排列以及文本在块级元素中的行进方向。在为整个文档设置书籍时，应在根元素上设置（对于 HTML 文档应该在 html 设置元素)设置元素)
该属性指定了块的流动方向，即块级容器的堆叠方向和块级容器中行内容的流动方向。因此，它还确定了块级内容的顺序。
语法
/* 关键值 */ writing-mode: horizontal-tb; writing-mode: vertical-rl; writing-mode: vertical-lr; /* 全局值 */ writing-mode: inherit; writing-mode: initial; writing-mode: unset;
将 write-mode 属性指定为下面列出的值之一。水平流动方向也受文本方向的影响，从左到右（ltr，与英语和大多数其他语言相似，或从右到左（rtl，类似于希伯来语或阿拉伯语)。
Values
horizontal-tb- 对于左对齐(ltr)文本，内容从左到右流动。右对齐(rtr)文本，内容从右到左流动。下一个水平行位于上行和下行。
vertical-rl- 对于左对齐(ltr)文本，内容从上到下垂直流动，下垂直行位于上行左侧。右对齐(rtr)文本，内容从下到上垂直流动，下垂直行位于上行右侧。
vertical-lr- 对于左对齐(ltr)文本，内容从上到下垂直流动，下垂直行位于上行右侧。右对齐(rtr)文本，内容从下到上垂直流动，下垂直行位于上行左侧。
sideways-rl- 对于左对齐(ltr)文本，内容从下到上垂直流动。右对齐(rtr)文本，内容从上到下垂直流动。所有字体(即使是垂直文本中的字体)都朝右。
sideways-lr- 对于左对齐(ltr)文本，内容从上到下垂直流动。右对齐(rtr)文本，内容从下到上垂直流动。所有字体(即使是垂直文本中的字体)都朝向左侧。
lr- 除 SVG1 除了文档，已经弃用了。对于文档。 CSS，请改用
horizontal-tb。 lr-tb- 除 SVG1 除了文档，已经弃用了。对于文档。 CSS，请改用
horizontal-tb。 rl- 除 SVG1 除了文档，已经弃用了。对于文档。 CSS，请改用
horizontal-tb。 tb- 除 SVG1 除了文档，已经弃用了。对于文档。 CSS，请改用
vertical-lr。 tb-rl- 除 SVG1 除了文档，已经弃用了。对于文档。 CSS，请改用
vertical-rl。
正式语法
horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
示例
这个例子显示了所有writing-mode语法和不同语言的显示。
HTML
以下 HTML 只是一个简单的
，每个单元格显示不同的内容 writing-mode 的文本。
CSS调整内容方向性 CSS 如下所示：.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; }效果是我们最初的截图效果。看完整的DEMO，如下：html>
table {
border-collapse:collapse;
}
td, th {
border: 1px black solid; padding: 3px;
}
th {
background-color: lightgray;
}
.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;
}
兼容性
当我们使用属性时，我们需要看到兼容性，否则会影响设备的显示效果。
评论0