竖着走的文字：用CSS writing-mode 玩转中文排版
话说，咱们中华文明上下五千年，书写方式那也是经历了不少变迁。从竹简上的刻字，到宣纸上的笔墨丹青，再到如今屏幕上的像素点，文字的呈现方式一直在进化。而这其中，最经典的莫过于咱们的竖排文字了。想象一下，古装剧里，书生们手捧书卷，摇头晃脑地吟诵诗词，那文字可都是从上往下，一列列排开的。
如今，互联网时代，横排文字成了主流。但偶尔，我们也会怀念那种古色古香的竖排韵味。那么，如何在网页上实现这种效果呢？别担心，CSS 的 writing-mode 属性，就能帮你轻松搞定！
writing-mode：文字书写的方向盘
writing-mode，顾名思义，就是“书写模式”。它就像一个方向盘，控制着文字在容器内的排列方向。它有几个常用的值，咱们一个个来认识一下：
-
horizontal-tb(默认值): 这是最常见的水平书写模式，文字从左到右，从上到下排列。英文、数字、以及绝大多数现代中文排版都采用这种模式。 -
vertical-rl: 这就是我们今天的主角！ 它让文字垂直排列，从右向左，从上到下。就像古代的竹简，一行写完，就往左边挪一列。 -
vertical-lr: 和vertical-rl类似，也是垂直排列，但方向相反，从左向右，从上到下。这个模式在某些日文排版中会用到，但中文里比较少见。 -
sideways-rl: 让文字横向排列，但整体旋转90度，从上到下。 -
sideways-lr: 同样是横向排列，旋转90度，但方向相反，从下到上。
代码示例：让文字“站起来”
说了这么多，不如直接上代码，感受一下 writing-mode 的魔力：
<!DOCTYPE html>
<html>
<head>
<title>竖排文字示例</title>
<style>
.vertical-text {
writing-mode: vertical-rl; /* 让文字竖着走！*/
/* 为了美观，加点样式 */
font-size: 20px;
line-height: 1.8; /* 调整行间距，让文字更舒展 */
margin: 20px; /* 留点空白，别挤在一起 */
}
</style>
</head>
<body>
<div class="vertical-text">
床前明月光，<br>
疑是地上霜。<br>
举头望明月，<br>
低头思故乡。
</div>
</body>
</html>这段代码很简单，定义了一个 vertical-text 类，并设置了 writing-mode: vertical-rl;。然后，将一段古诗词放入带有这个类的 div 元素中。运行一下，你就能看到诗句“站起来”了，是不是很有感觉？
不只是竖排：玩转文字的各种姿势
writing-mode 的强大之处，不仅仅在于让文字竖排。它还能与其他 CSS 属性配合，创造出各种意想不到的排版效果。
-
结合
text-orientation：控制文字方向有时候，即使设置了
writing-mode: vertical-rl，英文或数字还是会横着显示，影响美观。这时，text-orientation就能派上用场。它可以控制文字在垂直书写模式下的方向。text-orientation: upright;让文字保持直立，即使在垂直模式下。text-orientation: mixed;这是默认值，混合显示，通常英文和数字会横向显示。text-orientation: sideways;将文字旋转90度。
举个例子：
<style> .vertical-text { writing-mode: vertical-rl; text-orientation: upright; /* 让英文和数字也竖起来 */ font-size: 20px; line-height: 1.8; margin: 20px; } </style> <div class="vertical-text"> 这是一段包含英文的竖排文字，例如：Hello World! 12345。 </div>这段代码会让 “Hello World! 12345” 也竖着显示，虽然看起来可能有点奇怪，但能更好地控制整体的排版风格。
-
结合
direction：改变文字的起始方向direction属性可以改变文字的书写方向。通常，我们用它来处理阿拉伯语等从右向左书写的文字。 在writing-mode中，它可以影响垂直方向上的起始位置。direction: ltr;从左向右（默认值）。direction: rtl;从右向左。
虽然在中文竖排中不常用，但在某些特殊的设计场景下，它可以提供更多的灵活性。
-
配合 Flexbox 或 Grid：实现更复杂的布局
writing-mode可以和 Flexbox 或 Grid 布局系统完美结合，实现更复杂的排版效果。例如，你可以用 Flexbox 将多个竖排文字块并排排列，或者用 Grid 创建一个包含横排和竖排文字的混合布局。<style> .container { display: flex; /* 使用 Flexbox */ flex-direction: row; /* 横向排列 */ } .vertical-text { writing-mode: vertical-rl; font-size: 20px; line-height: 1.8; margin: 20px; } </style> <div class="container"> <div class="vertical-text">第一列文字</div> <div class="vertical-text">第二列文字</div> <div class="vertical-text">第三列文字</div> </div>这段代码会将三个竖排文字块横向排列，形成一个简单的竖排列表。
注意事项：竖排文字的那些坑
虽然 writing-mode 很强大，但在实际应用中，还是有一些需要注意的地方：
-
浏览器兼容性： 虽然主流浏览器都支持
writing-mode，但不同浏览器对某些细节的处理可能略有差异。建议在开发时进行充分的测试，确保在不同浏览器上的显示效果一致。特别是老版本的IE浏览器，可能需要一些额外的hack才能正常显示。 -
标点符号的处理： 在竖排文字中，标点符号的显示方式也需要特别注意。有些标点符号需要旋转90度才能更符合传统习惯。例如，句号（。）应该显示为小圆点在文字下方，而不是像横排那样在文字右侧。 CSS 提供了一些属性可以控制标点符号的显示，但实现起来比较复杂，需要仔细研究。
-
文本溢出的问题： 当容器的高度不足以容纳所有的竖排文字时，可能会出现文本溢出的情况。可以使用
overflow属性来控制溢出时的显示方式，例如，overflow: auto;会在必要时显示滚动条。 -
可读性： 虽然竖排文字很有韵味，但对于习惯了横排阅读的现代人来说，可能会降低阅读效率。因此，在设计时需要权衡美观和可读性，避免过度使用竖排文字。
应用场景：让你的网页更有个性
那么，writing-mode 可以在哪些场景下发挥作用呢？
-
古典风格的网站： 如果你想创建一个具有古典风格的网站，例如，展示中国传统文化、书法作品等，可以使用
writing-mode来营造古色古香的氛围。 -
杂志排版： 在一些杂志风格的网站中，可以使用竖排文字来突出标题、副标题或侧边栏的内容，增加视觉层次感。
-
特殊的设计效果：
writing-mode可以与其他 CSS 属性结合，创造出各种独特的排版效果，为你的网页增添亮点。例如，你可以将竖排文字与动画效果结合，制作出引人注目的动态标题。 -
移动端适配： 在移动端，屏幕空间有限，可以使用竖排文字来更有效地利用屏幕空间，例如，在侧边栏或导航栏中使用竖排文字。
总结：创意无限，玩转文字
总而言之，CSS 的 writing-mode 属性是一个非常强大的工具，它可以让你轻松实现竖排文字，并创造出各种独特的排版效果。虽然在使用时需要注意一些细节问题，但只要灵活运用，就能为你的网页增添个性和创意。
不要害怕尝试，大胆地去玩转文字吧！ 也许你会发现，原来文字还可以这样“站起来”，还可以这样“跳舞”！ 记住，创意是无限的，而 CSS 只是你实现创意的工具。 拿起你的代码编辑器，让文字在你的网页上自由驰骋吧！
最后，留个小小的思考题： 如何用 CSS 实现一个古风印章的效果，其中印章文字是竖排的？ 欢迎大家在评论区分享你的想法！ 让我们一起学习，一起进步，一起创造更美好的网页体验！