前端实现文本竖向排版，有几种常见的方法：
1. writing-mode CSS 属性:
这是最简单直接的方法。
.vertical-text {
writing-mode: vertical-rl; /* 从右到左 */
/* 或 */
writing-mode: vertical-lr; /* 从左到右 */
}
vertical-rl: 文本竖排，从右向左排列，类似传统的中文竖排版。vertical-lr: 文本竖排，从左向右排列。
2. text-orientation CSS 属性 (针对单个字符):
这个属性控制每个字符的方向，可以实现竖排，但主要用于控制字符的旋转，而非整段文本的排版。
.vertical-text {
text-orientation: upright; /* 字符竖直排列 */
writing-mode: vertical-rl; /* 或 vertical-lr */
}
3. 使用 transform 属性旋转:
可以旋转整个容器来实现竖排效果，但这种方法会影响布局，需要额外调整。
.vertical-text {
transform: rotate(-90deg); /* 旋转 -90 度 */
/* 需要调整 transform-origin 来控制旋转中心 */
transform-origin: top left;
/* 可能需要调整宽度和高度 */
}
4. 逐字换行:
通过 JavaScript 或后端处理，在每个字符后插入换行符 \n 或 <br> 标签。 这种方法比较灵活，可以实现更精细的控制，但代码实现略复杂。
function verticalizeText(text) {
return text.split("").join("<br>");
}
let element = document.getElementById("myElement");
element.innerHTML = verticalizeText("竖向排列");
5. 使用 SVG:
SVG 提供了更强大的文本排版能力，可以实现更复杂的竖排效果，包括沿路径排列等。
选择哪种方法取决于具体需求:
- 对于简单的竖排，
writing-mode最方便快捷。 - 需要控制单个字符方向，可以使用
text-orientation。 - 需要更精细的控制或复杂效果，可以使用 JavaScript 逐字换行或 SVG。
transform方法不太推荐，因为它会影响布局，处理起来比较麻烦。
示例 (writing-mode):
<!DOCTYPE html>
<html>
<head>
<style>
.vertical-text {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="vertical-text">
这是一段竖排的文字。
</div>
</body>
</html>
需要注意的兼容性问题:
writing-mode和text-orientation在较新的浏览器中支持良好，但在一些旧版浏览器中可能需要添加厂商前缀。- 使用
transform需要考虑旋转后的布局问题。
希望这些信息能帮助你! 请根据你的具体需求选择合适的方法。 如果有其他问题，请随时提出。
标签：vertical,text,transform,writing,竖向,竖排,mode,文本,排版 From： https://www.cnblogs.com/ai888/p/18576431