带有文本换行的CSS3 Circle

Answer 1

如果您只想使用CSS处理此问题并使其响应， p>

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

我提供三种选择。

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

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

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

不要忘记元素内部的填充是相对于容器的宽度的，因此padding: 14.65%将不起作用，除非圆形在具有相同宽度的元素内。

2。的JavaScript。

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

• 等宽（或近似）字体。
• 想出一个脚本来动态计算宽度。

脚本可以通过使用带有CSS display: pre;的内联块元素来计算所有断点（即单词）的宽度。在浏览器调整大小时，您可以使用这些宽度来计算每条线上可以容纳的宽度。

然而，每条线在圆圈内的长度不同，因此您必须从线高，圆高和数字中计算出来线条包含线的宽度。

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

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

3。 HTML Canvas + JS

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

Wrap text to a circle shape in svg or canvas

Answer 2

没有办法让元素实际上是圆形的，但你绝对可以使圆形具有设定的大小，并使文字适合使用padding适合圆圈内的最大正方形：
http://jsfiddle.net/pk7yk/2/
（示例仅适用于WebKit浏览器）

虽然你必须确保圆圈内的文字不太合适。

Answer 3

可以将文本换行到使用css3 border radius创建的圆圈内。 你只需要将填充量添加到边界半径

例如：

  

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你必须小心角落，虽然它看起来很圆，但元素实际上是盒形的，所以要有一个舒适的衬垫，以避免文字放在角落里。