带文字换行的 CSS3 圆圈

Question

是否可以在 CSS3 中使用 -webkit-border-radius 绘制一个圆，同时将宽度和高度限制为特定变量(例如 height:100px 和 width:100px) 所以当在圆圈内添加文本时，文本会换行而不是强制改变圆圈的大小？

Answer 1

如果您只想使用 CSS 处理此问题并使其具有响应性，不可能以您希望的方式实现。 p>

但是，它可以通过一些相当乏味的 JavaScript 来完成。

我提供了三种选择。

1。只有 CSS，不完美的解决方案。

<strong>   _-==-_
 -@@@@@@@@-
- @      @ -
| @      @ |
- @      @ -
 -@@@@@@@@-
   -.__.-
</strong>

假设是一个完美的圆，从数学上讲，它是每边半径的 14.65%(与宽度或高度相同)。

不要忘记元素内部的填充是相对于它的容器宽度的，所以 padding: 14.65% 不会起作用除非圆圈在元素内部相同的宽度。

2。 JavaScript.

字体字符有不同的大小。为此，您需要:

• 等宽(或关闭)字体。
• 想出一个脚本来动态计算宽度。

脚本可以通过使用带有 CSS display: pre; 的内联 block 元素来计算所有断点(即单词)的宽度。在浏览器调整大小时，您将使用这些宽度来计算每行可以容纳多少个。

但是，每条线在圆内的长度不同，所以你必须根据线高、圆高和数字来计算包含行的宽度。

这不是一个缓慢的过程，但是在 onresize 这样做会出现问题，所以我建议使用 font-size 和 circle 的固定比例大小-大小，因此您不必全部重做。

或者，另一种在加载时生成圆后调整圆大小的方法是使用带有比例因子的 CSS3 变换。

3。 HTML Canvas + JS

您可以按照以下解决方案改用 Canvas 吗？这会容易得多。即使这样，文本的宽度也会被计算出来，但可能比将每个单词加载到 DOM 中的内联 block 中快得多。

Wrap text to a circle shape in svg or canvas