带文本换行的CSS3圆圈

Question

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

Answer 1

如果你只想用CSS来处理这个问题，并让它有响应能力，那么it‘s possible in way你就可以了。

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

我提供了三种选择。

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

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

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

别忘了元素内部的填充与它的容器宽度有关，所以padding: 14.65%不会工作，除非圆是在一个具有相同宽度的元素内部。

2. JavaScript。

字体字符具有不同的大小。为此，您需要执行以下任一操作：

• 等宽(或闭合)字体。
• 提供动态计算宽度的脚本。

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

然而，，每一行在一个圆内都有不同的长度，所以你必须从行高，圆的高度和包含行的行数计算出包含行的宽度。

这不是一个缓慢的过程，但是这样做onresize会有问题，所以我建议使用固定比例的字体大小和圆圈大小，这样你就不需要全部重做了。

或者，在加载时生成圆之后，调整圆大小的另一种方法是使用具有比例因子的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边框半径创建的圆内换行文本。您只需将填充量添加到边界半径中

例如：

边界半径是宽度/高度除以2。元素必须是完美的正方形才能得到完美的圆。然后将填充金额添加到边界半径

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.创建圆的详细信息

附注:你必须注意角落，虽然它看起来是圆形的，但元素实际上是盒子形状的，所以要有一个舒适的填充，以避免文本被放置在角落。