最可控方案是CSS transform配合JavaScript动态计算字符坐标：将每个字符设为absolute定位的span，以圆心为原点，用cos/sin算xy偏移，rotate调整朝向切线方向，并显式设置父容器宽高防塌陷。
用 CSS transform + JavaScript 计算角度位置最可控
纯 HTML 无法让文字沿圆圈排列，必须配合 CSS 定位和 JS 动态计算坐标。核心思路是把每个字符或单词作为独立 <span>，用 transform: translateX() translateY() rotate() 移到圆周对应点，并调整旋转角度使文字朝向切线方向。
直接写死 12 个位置虽然简单，但换文字长度或圆半径就得重调——所以推荐用 JS 遍历字符、按弧度均分角度：
- 圆周总角度为
2 * Math.PI，n 个字符则每份间隔angleStep = 2 * Math.PI / n - 第 i 个字符的 x 偏移 =
radius * Math.cos(i * angleStep)，y 偏移 =radius * Math.sin(i * angleStep) - 加
rotate(angle + Math.PI/2)可让文字垂直于半径（即“贴着圆圈”），否则默认水平朝右
避免 position: absolute 父容器塌陷的常见坑
所有字符都设为 position: absolute 后，父容器高度会变成 0，导致后续元素上移或布局错乱。不能只靠 height 硬撑，因为圆直径随字号、半径动态变化。
稳妥做法是显式设置父容器 height 和 width，并用 overflow: visible 确保字符不被裁剪：
立即学习“前端免费学习笔记（深入）”；
<div class="circle-text" style="width: 300px; height: 300px; position: relative; overflow: visible;"> <span style="position: absolute; left: 50%; top: 50%;">A</span> <span style="position: absolute; left: 50%; top: 50%;">B</span> </div>
- 所有子
<span>的left: 50%; top: 50%是为了以圆心为原点，再用transform: translate()偏移 - 别用
margin-left: -50%类似技巧替代transform，否则旋转后定位会偏移 - 若父容器是 flex 或 grid 容器，需额外加
align-items: flex-start防止居中挤压
IE 不支持 transform: rotateZ() 时的降级方案
旧版 IE（≤11）对 transform 的支持不一致，rotateZ() 可能失效，且 transform-origin 行为异常。实际项目中如果必须兼容，建议放弃逐字旋转，改用 SVG 的 <textPath> ——它原生支持路径文本，且 IE9+ 均可渲染：
<svg width="300" height="300">
<defs>
<path id="circle-path" d="M150,150 m-100,0 a100,100 0 1,1 200,0 a100,100 0 1,1 -200,0" fill="none"/>
</defs>
<text>
<textPath href="#circle-path">Hello World</textPath>
</text>
</svg>-
d属性中的a100,100表示半径为 100 的圆弧，两个a拼成整圆 -
<textPath>默认从路径起点开始排布，如需起始角度偏移，得用startOffset（如startOffset="25%"） - SVG 方案不依赖 JS，但无法对单个字符单独控制样式（比如给某个字母加粗）
字体大小与圆半径不匹配时的视觉断裂
当文字字号过大、而圆半径过小时，字符会重叠甚至绕不到半圈；反之，半径太大则文字稀疏、不成“环形感”。没有固定比例，但有经验阈值：
- 英文字符：建议圆半径 ≥ 字号 × 字符数 ÷ 3.5（例如 20px 字号、10 个字母，半径至少 ≈ 57px）
- 中文字符：因字宽大，同一字号下需更大半径，通常乘以 1.4～1.8 倍系数
- 使用等宽字体（如
font-family: monospace）能让间距更均匀，避免宋体/微软雅黑中“i”和“W”宽度差异导致的错位
真正难调的不是代码，而是让“看起来像一个自然的圆环”——这取决于字号、行高、字间距、是否启用 letter-spacing，以及人眼对弧长分布的感知偏差。动手前先拿纸笔画个草图，比反复刷新浏览器更快。
