CSS竖排文字技巧：writing-mode垂直排版教程

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《CSS竖排文字技巧：writing-mode实现垂直排版》，聊聊，希望可以帮助到正在努力赚钱的你。

最核心的方法是使用writing-mode属性实现文字竖向排版，1. 使用writing-mode: vertical-rl实现文字从上到下、行从右到左排列，适用于模拟古籍或日文排版；2. 使用writing-mode: vertical-lr实现文字从上到下、行从左到右堆叠，适用于特定设计需求；3. 配合text-orientation: upright保持字符直立，避免英文数字旋转；4. 处理对齐时结合text-align与flex的align-items或margin实现居中；5. 溢出方向随文本流改变，需根据writing-mode调整overflow-x或overflow-y；6. 调整line-height控制行距，letter-spacing控制字间距；7. 响应式中竖排文字占用宽度大，可在小屏通过media query切回横向或隐藏；8. 图片需旋转或重裁以适配竖排，避免与多媒体紧密耦合；9. 交互元素建议保持横排或增大点击区域以提升触屏体验；10. 与Flexbox结合时，writing-mode会旋转主轴与交叉轴，flex-direction: column在vertical-rl下实现从上到下排列；11. Grid布局中writing-mode影响行列定义，可实现复杂混合排版；12. 实际使用需注意旧浏览器兼容性，尤其text-orientation: upright的支持情况。

CSS实现文字竖向排版，最核心也最直接的方法就是使用writing-mode这个CSS属性。它能彻底改变文本流的方向，让文字像传统书法那样从上到下、从右到左或从左到右排列。

解决方案

要实现文字的竖向排版，你主要会用到writing-mode属性。这个属性决定了文本行布局的方向，以及块级内容的堆叠方向。

我个人在项目中，最常用到的是vertical-rl和vertical-lr这两个值：

• writing-mode: vertical-rl;：这是最常见的竖排模式，文字从上到下排列，行从右到左堆叠。这很符合我们阅读日文或一些古籍的习惯，比如在网页侧边栏做一些标题，或者模拟古诗词的排版时，我就会倾向于用它。

  .vertical-text-rl {
      writing-mode: vertical-rl;
      /* 还可以配合其他属性调整细节 */
      text-orientation: upright; /* 保持字符直立，而非旋转 */
      white-space: nowrap; /* 防止自动换行 */
  }

• writing-mode: vertical-lr;：文字从上到下排列，行从左到右堆叠。这种模式在某些特定的设计场景下会有用，比如你希望文字竖排，但整体布局又希望从左侧开始。

  .vertical-text-lr {
      writing-mode: vertical-lr;
      text-orientation: mixed; /* 默认值，中文字符直立，英文字符旋转90度 */
  }

另外，text-orientation属性也相当关键。它控制着竖排文本中字符的方向。比如，如果你希望所有字符，包括英文数字，都能保持“直立”而不是旋转90度，那么text-orientation: upright;就是你的好帮手。但要注意，upright在旧版本浏览器上兼容性可能没那么好，实际使用时需要留意。而mixed是默认值，它会让中文、日文等全角字符保持直立，而西文字符（比如英文、数字）则会旋转90度，这在很多时候反而是我们想要的，因为它更符合阅读习惯。

竖向排版时，文字的对齐和溢出问题如何处理？

当我们把文字变成竖向排版后，很多原本横向排版的经验就得重新审视了。我发现，文字的对齐方式和处理溢出是两个经常让人头疼的问题。

首先是对齐。在横向排版里，text-align控制的是水平对齐，但在竖向排版里，text-align实际上控制的是“行内轴”上的对齐，也就是每行文字内部的对齐。而justify-content（如果父容器是flex或grid）或者说传统的块级元素中，控制“块级轴”的对齐方式，也就是行与行之间的对齐。举个例子，如果我希望竖排的文字在容器里居中，我可能需要结合text-align: center;和align-items: center;（如果父容器是flexbox）或者设置margin: auto;。这块确实有点绕，需要多尝试。

其次是溢出。当文字内容超出容器时，横向排版我们会用overflow-x，竖向排版自然就想到overflow-y。但实际情况是，writing-mode改变了文本流的方向，所以溢出方向也随之改变。比如，writing-mode: vertical-rl;时，文本是从右往左堆叠的，如果内容过多，它会向左侧溢出，此时你可能需要关注overflow-x来处理滚动条或隐藏。这有点反直觉，但你只要记住，溢出总是发生在文本流的“结束”方向就行了。我通常会给容器设置一个固定的高度或宽度，然后根据writing-mode的方向来设置对应的overflow属性，比如overflow-x: auto;或overflow-y: auto;。

此外，行高（line-height）和字间距（letter-spacing）在竖排模式下也需要重新调整。line-height在竖排模式下控制的是行与行之间的距离，而letter-spacing则控制字符与字符之间的距离。我常常会把line-height设置得比字号大一些，让行间距更舒适，而letter-spacing则根据字体和设计需求来微调，有时候甚至会用到负值来让字符更紧凑。

竖向排版在响应式设计中会带来哪些挑战？

竖向排版在响应式设计中确实是个挑战，它不像横向排版那样有成熟的响应式模式。我个人在处理这块的时候，通常会遇到几个比较棘手的问题。

一个主要问题是空间利用率。在小屏幕设备上，竖向排版会迅速占据屏幕的宽度，导致内容显示区域非常有限。比如，如果一个侧边栏的竖排标题在PC端看起来很酷，但在手机上可能就直接占满了整个屏幕宽度，或者导致其他主要内容被挤压。这时候，我可能会考虑在特定断点（media query）下，将writing-mode改回horizontal-tb，让它变回横向排版，或者干脆隐藏掉。这是一种“妥协”，但能确保用户体验。

另一个挑战是图片和多媒体元素的适应性。如果你的设计中包含了图片或者视频，并且它们需要和竖排文字一起呈现，那么它们的尺寸和方向就成了问题。图片通常是横向的，如果和竖排文字混排，可能需要进行旋转（使用transform: rotate(90deg);）或者重新裁剪。但这又会带来新的问题，比如图片质量下降，或者旋转后占据的空间不符合预期。我通常的策略是，尽量避免在响应式设计中将图片与竖排文字紧密耦合，或者为不同屏幕尺寸准备不同的图片版本。

再者，交互元素，比如按钮、链接，如果也采用竖排文字，在触摸屏上可能会影响点击区域的判断。手指点击的精确度不如鼠标，竖排的细长按钮可能不太容易点中。这种情况下，我通常会把交互元素的文字保持横向，或者至少提供一个足够大的点击区域。

总的来说，在响应式设计中引入竖向排版，需要非常谨慎。我倾向于只在非核心内容、装饰性文本，或者特定文化背景（如日文网站）的场景下使用。对于核心内容，尤其是在移动端，横向排版依然是更稳妥、用户体验更好的选择。

CSS writing-mode与其他布局方式（如Flexbox、Grid）的结合使用技巧有哪些？

将writing-mode与Flexbox或Grid结合使用，可以创造出非常灵活和强大的布局效果。我发现，理解它们如何协同工作，关键在于搞清楚“主轴”和“交叉轴”的概念会如何随着writing-mode的变化而改变。

当一个容器设置了display: flex;或display: grid;，并且其内部元素的writing-mode被设置为竖向时，Flexbox或Grid的主轴和交叉轴会根据writing-mode的方向进行调整。

以Flexbox为例： 默认情况下，flex-direction: row;意味着主轴是水平的。但如果容器内的文本是writing-mode: vertical-rl;，那么Flex项目（flex items）会从右到左排列，而每个Flex项目内部的文本则是竖向的。更进一步，如果你将Flex容器本身也设置了writing-mode: vertical-rl;，那么整个Flex容器的主轴和交叉轴都会旋转90度。这时，flex-direction: row;实际上会使项目从上到下排列（因为“行”变成了竖直方向），而flex-direction: column;则会使项目从右到左排列。这听起来有点烧脑，但一旦你理解了轴向的这种“旋转”，很多布局问题就能迎刃而解。我通常会画个草图，把轴向标出来，这样会清晰很多。

举个例子，如果我想做一个竖排导航栏，每个导航项都竖排显示，并且从上到下排列：

<nav class="vertical-nav">
    <a href="#">首页</a>
    <a href="#">产品</a>
    <a href="#">关于我们</a>
</nav>

.vertical-nav {
    display: flex;
    flex-direction: column; /* 让导航项从上到下排列 */
    writing-mode: vertical-rl; /* 容器本身也竖排，所以主轴是垂直的 */
    height: 100%; /* 假设有足够高度 */
    justify-content: space-around; /* 垂直方向均匀分布 */
}

.vertical-nav a {
    writing-mode: vertical-rl; /* 链接文字竖排 */
    text-orientation: upright; /* 保持文字直立 */
    padding: 10px 5px;
    white-space: nowrap;
    /* 其他样式 */
}

在Grid布局中，这个概念同样适用。grid-template-columns和grid-template-rows的定义也会受到writing-mode的影响。当你设置了writing-mode后，grid-template-columns实际上可能控制的是垂直方向的轨道，而grid-template-rows控制的是水平方向的轨道。这使得创建复杂的混合布局变得可能，比如你可以在一个Grid布局中，某些单元格是横排文本，另一些是竖排文本，通过巧妙地结合writing-mode和Grid的定位属性，可以实现非常独特的视觉效果。我个人觉得Grid在这方面提供了比Flexbox更大的自由度，因为它能更精确地控制二维布局。但同样的，这种轴向的转换需要一些时间去适应和理解。

终于介绍完啦！小伙伴们，这篇关于《CSS竖排文字技巧：writing-mode垂直排版教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！