移动端竖排文字布局高度异常？检查 block-size 属性
当网页采用竖排文字模式时，元素高度计算可能不符合预期，需检查 block-size 属性的设置。
确认 writing-mode 是否切换为竖排模式
竖排文字布局异常通常源于 writing-mode 属性的设置。该属性决定了文本的书写方向，当设置为 vertical-rl 或 vertical-lr 时，文本流会从上到下排列。若未明确指定此属性，浏览器默认使用水平方向，此时 block-size 对应的是元素的高度。在竖排模式下，block-size 实际上控制的是元素在水平方向上的宽度。检查代码中是否正确应用了 writing-mode，是排查布局问题的第一步。
在调试工具中查看元素的计算样式，确认 writing-mode 的当前值。如果页面包含多语言内容或特殊排版需求，确保全局样式或特定容器的 writing-mode 设置一致。错误的模式会导致 block-size 的映射关系失效，从而引起布局错位。例如，将竖排文本容器误设为水平模式，会导致内容溢出或高度计算错误。
检查 block-size 的具体取值类型
block-size 属性支持多种取值类型，包括长度单位、百分比、关键字和计算值。常见的长度单位如 px、em 或 % 可以直接指定尺寸。百分比值则相对于包含块的 block-size 进行计算。如果使用了 auto 关键字，浏览器会根据内容自动调整尺寸。在竖排模式下，确保 block-size 的值符合预期的宽度要求，避免因单位不匹配导致的布局问题。
对于复杂的布局场景，可以使用 calc() 函数或 anchor-size() 函数进行动态计算。例如，设置 block-size: calc(anchor-size(--my-anchor block) * 0.75) 可以基于锚点元素计算宽度。检查这些计算值是否在浏览器中正确解析，特别是在移动设备上，不同浏览器的计算逻辑可能存在细微差异。
验证元素在竖排模式下的实际渲染尺寸
通过开发者工具的布局视图或元素面板，查看元素在竖排模式下的实际渲染尺寸。对比 block-size 的设置值与实际显示的宽度，确认是否存在差异。如果设置值为 200px 但实际宽度不符，可能是包含块的尺寸限制或继承值干扰。在移动端测试时，注意不同屏幕尺寸下的表现，确保布局在不同设备上保持一致。
使用 MDN 提供的示例代码进行验证。创建一个简单的 HTML 结构，设置 writing-mode: vertical-rl 和 block-size: 200px，观察元素的实际宽度。如果结果符合预期，说明属性设置正确；否则，检查是否有其他 CSS 属性（如 padding、border 或 box-sizing）影响了最终尺寸。
排查与 inline-size 的关联影响
block-size 与 inline-size 是一对逻辑属性，分别定义元素在块轴和内联轴上的尺寸。在竖排模式下，block-size 控制宽度，而 inline-size 控制高度。如果 inline-size 设置不当，可能导致元素高度异常。检查 inline-size 的值是否合理，特别是在使用百分比时，确保包含块的 inline-size 已正确计算。
在调试时，同时查看 block-size 和 inline-size 的计算值。如果 inline-size 设置为 auto，浏览器会根据内容自动调整高度。在移动端测试时，注意竖排文本的行高和字间距，这些因素可能影响 inline-size 的最终值。通过调整 inline-size，可以优化竖排布局的整体效果。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。