表格单元格内旋转文本为何出现行倒置现象？

原始代码 #

CSS 代码 #

.rotate_text {
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.rotated_cell {
    width: 5%;
    text-align: center;
    vertical-align: center;
    padding: 1px;
    padding-bottom: 10px;
    padding-top: 20px;
}

HTML 代码 #

<table><tr>
<td class="rotate_text rotated_cell" colspan="1" rowspan ="2">Reference#<br> 6118</td>
</tr></table>

实际效果 #

问题原因 #

你同时使用了writing-mode: vertical-lr和rotate(-180deg)，两个变换叠加导致文本行倒置：

1. writing-mode: vertical-lr会将文本转为垂直左到右排列：原本用<br>分隔的两行内容，会以垂直列的形式从左到右分布，文字本身也会变为垂直方向（从上到下阅读）。
2. 叠加的rotate(-180deg)会把整个单元格元素翻转180度，不仅让文字方向完全颠倒，还会让<br>分隔的两行顺序反转，最终导致6118出现在Reference#的视觉左侧，整体文本倒置。

解决方法 #

根据你“6118位于Reference#右侧（垂直排列时的下方）、文本正立”的需求，提供两种可行方案：

方案1：调整书写模式，移除多余旋转 #

直接使用vertical-rl书写模式，并保证文字正立，无需额外旋转：

.rotate_text {
    writing-mode: vertical-rl;
    text-orientation: upright; /* 确保文字保持正立，不倾斜 */
}

.rotated_cell {
    width: 5%;
    text-align: center;
    vertical-align: middle; /* 修正拼写错误：vertical-align无center值，正确值为middle */
    padding: 1px;
    padding-bottom: 10px;
    padding-top: 20px;
}

方案2：用transform实现垂直旋转，保留文本顺序 #

如果更习惯用旋转实现，可移除writing-mode，直接旋转90度并调整原点：

.rotate_text {
    transform: rotate(90deg);
    transform-origin: center;
    white-space: pre-line; /* 保留<br>的换行效果 */
}

.rotated_cell {
    width: 5%;
    text-align: center;
    vertical-align: middle;
    padding: 1px;
    padding-bottom: 10px;
    padding-top: 20px;
}

这两种方案都能让Reference#在上、6118在下（视觉右侧），同时文本保持正立可读。

内容的提问来源于stack exchange，提问作者Maxcot