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的书写模式，说白了，就是决定了文本内容在页面上是横着排还是竖着排，是从左往右还是从右往左流动的。我们主要通过
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
或者
p
标签，想让里面的文字竖着排，并且从右往左堆叠，那就直接给它加上
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的垂直书写模式？具体场景有哪些？
垂直书写模式虽然不常用，但在一些特定场景下却能发挥奇效，甚至可以说是不可或缺。
日文、中文等语言的传统排版：这是最主要的应用场景。很多东亚语言的传统书籍、报纸、诗歌，都是从右往左、从上到下竖排的。在网页上需要模拟这种阅读体验时，
writing-mode: vertical-rl;
就派上用场了。比如一个展示古诗词的页面，或者一个模拟日式漫画阅读的网站。
《PHP设计模式指南》中文版
《PHP设计模式》首先介绍了设计模式，讲述了设计模式的使用及重要性，并且详细说明了应用设计模式的场合。接下来，本书通过代码示例介绍了许多设计模式。最后，本书通过全面深入的案例分析说明了如何使用设计模式来计划新的应用程序，如何采用PHP语言编写这些模式，以及如何使用书中介绍的设计模式修正和重构已有的代码块。作者采用专业的、便于使用的格式来介绍相关的概念，自学成才的编程人员与经过更多正规培训的编程人员
341 查看详情
创意网页设计和艺术排版：设计师有时候为了追求独特的视觉效果，会刻意使用垂直文本。比如，一个网站的标题、一个宣传语、或者某个特定的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
对轴向的定义。
处理
writing-mode
的时候，关键在于转换思维，从物理方向（上、下、左、右）转向逻辑方向（起始、结束、块轴、行内轴）。一旦掌握了这一点，你会发现它并没有想象中那么难以驾驭。
以上就是CSS书写模式怎么设置_CSS书写模式使用教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1074342.html
微信扫一扫 
支付宝扫一扫 
