带文本换行的 CSS3 圆圈答案

【问题标题】：CSS3 Circle with text wrap带文本换行的 CSS3 圆圈
【发布时间】：2017-05-02 20:41:01
【问题描述】：

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

【问题讨论】：

标签： css webkit

【解决方案1】：

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

但是，可以使用一些相当乏味的 JavaScript 来完成。

我提供了三种选择。

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

   _-==-_
 -@@@@@@@@-
- @      @ -
| @      @ |
- @      @ -
 -@@@@@@@@-
   -.__.-

假设一个完美的圆，在数学上是每边半径的 14.65%（与宽度或高度相同）。

不要忘记元素内的填充是相对于其容器的宽度而言的，所以padding: 14.65% 将不起作用除非圆圈位于具有相同宽度的元素内。

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

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

然而，每条线在一个圆圈内的长度不同，所以你必须从线高、圆圈高度和数字中计算出来行数包含行的宽度。

这不是一个缓慢的过程，但这样做 onresize 会有问题，所以我建议要么使用字体大小和圆圈的固定比例大小-size，因此您不必全部重做。

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

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

【讨论】：

【解决方案2】：

没有办法使元素实际上是圆形的，但是您绝对可以使用padding：
@ 将圆形设置为固定大小，并使文本适合圆形内的最大正方形987654321@
（示例仅适用于 WebKit 浏览器）

尽管您必须确保圆圈内没有太多文字无法容纳。

【讨论】：

【解决方案3】：

可以将文本包裹在使用 css3 边框半径创建的圆内。您只需将填充量添加到边框半径

例如：

border-radius 是宽度/高度除以 2。元素必须是一个完美的正方形得到一个完美的圆。然后将填充 amt 添加到边界半径

CSS：

.testCircle{
   width:200px; 
   height:200px;
   border-radius:150px;
   background-color:#333;
   padding: 50px;
}

HTML：

<div class="testCircle">
      Text inside a circle
</div>

这将导致文本在圆圈内换行。在FF中测试。了解更多关于使用 css3 创建圈子的信息 css circle with text wrapped inside.

P.S 你必须小心角落，虽然它看起来是圆形的，但元素实际上是盒形的，所以有一个舒适的填充，以避免文本被放置在角落里。

【讨论】：