tailwind css 3.0+ 原生支持 writing-mode，无需插件；直接使用 vertical-rl、vertical-lr、horizontal-tb 等工具类，并配合 text-orientation-mixed 等实现中英混排竖排，line-clamp 在竖排下失效属规范限制。
writing-mode 在 Tailwind 中根本不需要插件
Tailwind CSS 自 3.0 起已原生支持 writing-mode，无需额外安装插件或配置。所谓 “writing-mode 插件” 是过时信息，强行引入反而可能引发冲突或样式覆盖问题。
直接使用内置工具类即可，例如：vertical-rl、vertical-lr、horizontal-tb —— 它们分别对应 CSS 的 writing-mode: vertical-rl、vertical-lr、horizontal-tb 值。
vertical-rl 和 vertical-lr 的实际表现差异
两者都让文字竖排，但文本流向和行内起始位置不同，影响对齐与换行逻辑：
-
vertical-rl：文字从右向左排列（即新行出现在左侧），中文/日文传统排版常用；text-align: center会以“字列中线”为基准居中 -
vertical-lr：文字从左向右排列（新行出现在右侧），更接近西方竖排习惯；在部分字体下可能导致标点悬挂异常 - 若容器宽度不足，
vertical-rl默认向下溢出，而vertical-lr可能向上顶出（取决于direction和unicode-bidi状态）
配合 text-orientation 控制单字朝向
仅用 writing-mode 不足以让英文或数字“横着显示”，必须叠加 text-orientation：
-
text-orientation-mixed→ 英文/数字自动横排，汉字竖排（推荐用于中英混排） -
text-orientation-upright→ 所有字符强制 upright（汉字不变，英文字母旋转 90°，易读性差） -
text-orientation-sideways→ 全部字符侧躺（等效于未设该属性时的默认行为）
示例：class="vertical-rl text-orientation-mixed" 是中文标题竖排 + 英文单位横排的常见组合。
line-clamp 在竖排下失效？这是预期行为
line-clamp 基于块级盒模型的“行”概念，而 writing-mode: vertical-* 改变了块流方向，导致 line-clamp 无法正确识别“第几行”。这不是 bug，是 CSS 规范限制。
替代方案只有两个：
- 改用
display: -webkit-box+-webkit-line-clamp并手动指定容器height（需配合overflow: hidden） - 放弃截断，用
text-overflow: ellipsis配合固定width和white-space: nowrap（只适用于单行竖排）
竖排文本的长度控制始终是手工活，没有通用自动截断方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
