CSS3环绕文本的圆形布局

Question

在CSS3中，是否可以使用-webkit-border-radius绘制圆形，并同时限制宽度和高度为特定变量（例如height:100px和width:100px），使得当在圆形内添加文本时，文本能够自动换行而不是强制改变圆形的大小？

- TronCraze

---

如果内容的大小发生变化，元素也会随之必要地改变。 - yoda

但是你可以使用foreignObject来创建SVG圆形，并嵌入HTML内容。这样，您就可以同时进行矢量和排版。 - MikeyKennethR

Answer 1

如果您想仅使用CSS处理此问题并使其响应式，以您想要的方式是不可能的。 但是，可以通过一些相当繁琐的JavaScript来完成。

我提供三种替代方案。

1. 仅使用CSS，但解决方案不完美。

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

数学上，每个边的半径（宽度或高度相同）的14.65％是完美圆形的假设下的半径。

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

2. JavaScript。

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

• 等宽字体（或接近等宽）。
• 设计一个脚本来实时计算宽度。

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

然而，圆形内的每行长度都会有所不同，因此您必须根据行高、圆形高度和行数来计算包含行的宽度。

这不是一个缓慢的过程，但在调整大小时onresize 可能会有问题，因此我建议使用字体大小和圆形大小的固定比率调整大小，这样您就不必重新执行所有操作。

另外，生成后调整圆形大小的另一种方法是使用具有比例因子的CSS3变换。

3. HTML Canvas + JS

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

将文本包装成SVG或画布中的圆形形状

- tbjgolden

Answer 2

可以使用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圆。

P.S 虽然看起来是圆形，但元素实际上是盒状的，因此必须有舒适的填充以避免文本放置在角落中。

- krishna sagar

Answer 3

无法使元素实际上成为圆形，但您绝对可以将圆设置为固定大小，并使用 padding 使文本适合最大的正方形，该正方形适合于圆内：
http://jsfiddle.net/pk7yk/2/
（此示例仅在 WebKit 浏览器中有效）

尽管如此，您必须确保圆内没有太多文本需要适应。

- Robin Winslow