CSS书写模式怎么设置_CSS书写模式使用教程

爱谁谁

发布时间：2025-09-17 14:15:01

1082人浏览过

来源于php中文网

原创

CSS书写模式由writing-mode属性控制，决定文本横排或竖排及流向。其值包括horizontal-tb（默认，水平从左到右）、vertical-rl（垂直从上到下，列从右向左）和vertical-lr（垂直从上到下，列从左向右）。该属性改变块轴与行内轴方向，影响width/height、margin、padding、text-align等属性的行为逻辑。在vertical-rl或vertical-lr下，width控制垂直高度，height控制水平宽度；text-align沿行内轴对齐，竖排时居中为垂直居中。常用于中文日文竖排、创意设计、紧凑导航栏、图表标签等场景。需配合text-orientation控制字符旋转，推荐使用逻辑属性如margin-block-start、padding-inline-end、block-size、inline-size等以适应不同书写模式。direction用于设置行内文本方向（ltr/rtl），影响双语混排。Flexbox与Grid布局的轴向也随writing-mode变化，flex-direction: row在竖排模式下表现为水平排列。关键是从物理方向思维转向逻辑轴思维，提升多语言与多方向布局灵活性。

css书写模式怎么设置_css书写模式使用教程

CSS的书写模式，说白了，就是决定了文本内容在页面上是横着排还是竖着排，是从左往右还是从右往左流动的。我们主要通过

writing-mode

这个CSS属性来设置它，它就像给文本流定了一个大方向。对我来说，这东西乍一看可能觉得没啥用，但一旦你遇到多语言排版，比如日文、中文的竖排，或者一些特别的创意设计需求，那它简直就是救星。

解决方案

要设置CSS的书写模式，核心就是使用

writing-mode

属性。这个属性有几个常用的值，它们分别对应不同的文本流动方向：

```
horizontal-tb
```
(默认值): 这是我们最熟悉的模式，文本从左到右水平流动，行从上到下垂直堆叠。大部分网页内容都采用这种模式。
```
.element {
    writing-mode: horizontal-tb;
}
```
```
vertical-rl
```
: 文本从上到下垂直流动，列从右到左水平堆叠。这是日文、中文等语言常见的竖排方式，通常用于从右往左阅读的场景。

立即学习“前端免费学习笔记（深入）”；
```
.element {
    writing-mode: vertical-rl;
}
```
```
vertical-lr
```
: 文本同样从上到下垂直流动，但列是从左到右水平堆叠。这在某些特定的设计中也会用到，比如一些垂直的导航或者侧边栏标签。
```
.element {
    writing-mode: vertical-lr;
}
```

设置起来很简单，你只需要把这个属性应用到你想要改变书写模式的元素上就行。比如，你有一个

div

或者

标签，想让里面的文字竖着排，并且从右往左堆叠，那就直接给它加上

writing-mode: vertical-rl;

。但要注意，这个属性会影响整个元素内部的文本流，以及它子元素的布局行为，所以用的时候得想清楚。

CSS书写模式对布局和文本流有什么影响？

writing-mode

可不只是简单地把文字转个方向，它骨子里改变了我们对“水平”和“垂直”的理解，进而深刻影响了整个布局模型。说白了，它重新定义了块轴（block axis）和行内轴（inline axis）。

在默认的

horizontal-tb

模式下，行内轴是水平的（文本从左到右），块轴是垂直的（块级元素从上到下堆叠）。但当你切换到

vertical-rl

或

vertical-lr

时，情况就完全反过来了：行内轴变成了垂直的（文本从上到下），块轴则变成了水平的（块级元素从右到左或从左到右堆叠）。

这意味着什么呢？

尺寸的颠倒：原本的
```
width
```
和
```
height
```
属性，在垂直书写模式下，它们的含义会发生逻辑上的互换。
```
width
```
会控制块级元素在行内轴上的尺寸（也就是竖排文本的“高度”），而
```
height
```
则控制块级元素在块轴上的尺寸（也就是竖排文本的“宽度”）。这听起来有点绕，但理解了行内轴和块轴的概念就清楚了。
外边距、内边距和边框：传统的
```
margin-top
```
、
```
margin-left
```
这些，在垂直模式下，它们的“方向”也会跟着变。为了更清晰地处理这种变化，CSS引入了逻辑属性（logical properties），比如
```
margin-block-start
```
、
```
margin-inline-end
```
。这些逻辑属性会根据当前的
```
writing-mode
```
自动调整其物理方向。比如，在
```
vertical-rl
```
模式下，
```
margin-block-start
```
就相当于物理上的
```
margin-right
```
。
文本对齐：
```
text-align
```
属性也会受到影响。它始终是沿着行内轴进行对齐。在
```
horizontal-tb
```
中，
```
text-align: center
```
是水平居中；而在
```
vertical-rl
```
或
```
vertical-lr
```
中，
```
text-align: center
```
则会变成垂直居中。
浮动和定位：浮动（
```
float
```
）在垂直书写模式下的行为会变得复杂且不那么直观，通常不建议混合使用。定位（
```
position
```
）的
```
top
```
、
```
left
```
等属性，虽然物理位置不变，但它们相对的“起始点”和“方向”也需要重新考量。

举个例子，假设你有一个

div

，里面有几行文字：


    第一行文字
    第二行文字

.vertical-text-container {
    writing-mode: vertical-rl;
    /* 这里的width实际上控制的是垂直方向的“高度” */
    width: 200px;
    /* 这里的height实际上控制的是水平方向的“宽度” */
    height: 100px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 10px;
}
p {
    margin: 0;
    /* text-align: center 在 vertical-rl 模式下会使文本在垂直方向上居中 */
    text-align: center;
}

你会发现，

width

现在控制的是文本从上到下的显示范围，而

height

则控制了整个块从右到左的堆叠宽度。这和我们习惯的认知完全不同，所以理解其对轴向的改变是关键。

什么时候会用到CSS的垂直书写模式？具体场景有哪些？

垂直书写模式虽然不常用，但在一些特定场景下却能发挥奇效，甚至可以说是不可或缺。

GNCMS可视化拖拽公司网站模板1.0.0

高端网络建设公司设计类网站模板 IT互联网移动建站类网站源码(带手机版数据同步)本套模板采用现在非常流行的全屏自适应布局设计，且栏目列表以简洁，非常时尚大气。后台支持可视拖拽编辑。模板特点：1、手工书写DIV+CSS、代码精简无冗余。2、自适应结构，全球先进技术，高端视觉体验。3、SEO框架布局，栏目及文章页均可独立设置标题/关键词/描述。4、后台直接修改联系方式、传真、邮箱、地址等，修改更加方

下载

日文、中文等语言的传统排版：这是最主要的应用场景。很多东亚语言的传统书籍、报纸、诗歌，都是从右往左、从上到下竖排的。在网页上需要模拟这种阅读体验时，
```
writing-mode: vertical-rl;
```
就派上用场了。比如一个展示古诗词的页面，或者一个模拟日式漫画阅读的网站。
创意网页设计和艺术排版：设计师有时候为了追求独特的视觉效果，会刻意使用垂直文本。比如，一个网站的标题、一个宣传语、或者某个特定的UI元素，通过垂直排版能带来更强的视觉冲击力或艺术感。这在一些品牌网站、艺术作品集或者个人博客中比较常见。

紧凑的UI元素和侧边栏导航：在一些空间有限的UI设计中，垂直书写模式可以帮助我们更有效地利用空间。例如，一个左侧或右侧的导航栏，如果导航项名称较长，但横向空间又不足，可以考虑将其设置为垂直文本。这样既能展示完整内容，又能保持布局的紧凑。


    产品介绍
    服务项目
    联系我们

.vertical-nav {
    writing-mode: vertical-rl; /* 文本从上到下，导航项从右往左堆叠 */
    width: 30px; /* 导航条的“宽度” */
    height: 100%; /* 导航条的“高度” */
    background-color: #333;
    color: white;
    display: flex; /* 使用Flexbox辅助布局 */
    flex-direction: column; /* 导航项垂直排列 */
    justify-content: center; /* 导航项垂直居中 */
    align-items: center; /* 导航项水平居中 */
}
.vertical-nav a {
    display: block;
    padding: 10px 5px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap; /* 防止文本自动换行 */
}

这个例子中，导航链接会竖着排，并且整个导航栏是窄窄的一条。

图表标签或数据展示：在一些数据可视化图表中，轴标签或者数据点标签可能需要垂直显示，以避免重叠或节省空间。虽然通常会用
```
transform: rotate()
```
来实现，但在某些情况下，
```
writing-mode
```
也是一种选择，尤其当标签本身就是多行文本时。

总的来说，垂直书写模式的应用场景虽然小众，但它提供了一种强大的排版能力，让我们能够跳出传统的横向思维，探索更多样化的网页布局和内容呈现方式。

配合

writing-mode

，还有哪些CSS属性需要注意和调整？

当

writing-mode

改变了文本流的方向后，很多我们习以为常的CSS属性的行为都会发生变化，或者需要配合调整，才能达到预期的效果。这就像是换了一套度量衡，你得适应新的规则。

```
text-orientation
```
：这个属性在垂直书写模式下尤为关键。它控制着垂直文本中字符的方向。
- ```
text-orientation: mixed;
```
  (默认值): 保持字符正常的横向方向，但标点符号和数字可能会旋转。
- ```
text-orientation: upright;
```
  : 所有字符（包括拉丁字母和数字）都保持“直立”方向，这在日文和中文的竖排中很常见，能让西文字符看起来不那么别扭。
- ```
text-orientation: sideways;
```
  : 所有字符都旋转90度，使其侧向显示。
```
.vertical-text {
writing-mode: vertical-rl;
text-orientation: upright; /* 让英文字母和数字也保持直立 */
}
```
  没有
```
text-orientation
```
  的配合，垂直文本中的英文或数字可能会横着显示，阅读体验会很差。
逻辑属性（Logical Properties）：前面也提到了，为了更好地适应
```
writing-mode
```
带来的轴向变化，CSS引入了一系列逻辑属性。我个人强烈建议在处理多书写模式或需要更灵活布局时，尽量使用这些逻辑属性。
- 外边距：
```
margin-block-start
```
  ,
```
margin-block-end
```
  ,
```
margin-inline-start
```
  ,
```
margin-inline-end
```
- 内边距：
```
padding-block-start
```
  ,
```
padding-block-end
```
  ,
```
padding-inline-start
```
  ,
```
padding-inline-end
```
- 边框：
```
border-block-start
```
  ,
```
border-block-end
```
  ,
```
border-inline-start
```
  ,
```
border-inline-end
```
- 定位：
```
inset-block-start
```
  ,
```
inset-block-end
```
  ,
```
inset-inline-start
```
  ,
```
inset-inline-end
```
- 尺寸：
```
block-size
```
  (对应块轴尺寸),
```
inline-size
```
  (对应行内轴尺寸) 使用这些属性，你就不必担心
```
writing-mode
```
  切换后，
```
margin-top
```
  到底对应哪个物理方向了，它们会自动适应。
```
direction
```
：这个属性控制的是行内文本的基线方向（比如从左到右或从右到左）。它主要用于处理像阿拉伯语、希伯来语这类从右到左书写的语言。虽然
```
writing-mode
```
决定了块的堆叠方向和文本流的整体方向，但
```
direction
```
仍然可以控制每一行内部字符的顺序。在
```
vertical-rl
```
模式下，如果文本内容中包含需要从右到左书写的语言，
```
direction: rtl;
```
仍然是必要的。
```
line-height
```
和
text-align
：
- ```
line-height
```
  ：在垂直书写模式下，它控制的是文本行在行内轴上的间距，也就是“行高”在垂直方向上的表现。
- ```
text-align
```
  ：如前所述，它始终是沿着行内轴对齐。所以，如果你想让垂直文本在“横向”上居中（也就是在块轴上居中），你需要将
```
text-align
```
  设置在父元素上，并且父元素需要有足够的
```
inline-size
```
  （在垂直模式下，这通常是
```
height
```
  ）。
Flexbox 和 Grid 布局：当父元素设置了
```
writing-mode
```
时，其子元素作为Flex项或Grid项的布局行为也会受到影响。Flex容器和Grid容器的轴向会根据
```
writing-mode
```
重新定义。这意味着
```
flex-direction: row;
```
在
```
vertical-rl
```
模式下，实际上会使子元素沿着块轴（水平方向）排列。所以，在使用这些布局系统时，要时刻记住当前
```
writing-mode
```
对轴向的定义。