CSS3 带有文字环绕的圆圈
是否可以在 CSS3 中使用 -webkit-border-radius 绘制圆形，同时将宽度和高度限制为特定变量（例如 height:100px 和 width :100px) 那么当文本添加到圆圈内时，文本会换行而不是强制改变圆圈的大小？
Is it possible to draw a circle using -webkit-border-radius in CSS3 whilst constraining the width and height to specific variables (such as height:100px and width:100px) so when text is added inside the circle the text wraps instead of forcing the size of the circle to change?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如果您想仅使用 CSS 来处理此问题并使其具有响应性，不可能以您想要的方式实现。
然而，它可以通过一些相当乏味的 JavaScript 来完成。
我提供三种选择。
1.仅CSS，不完善的解决方案。
从数学上来说，它是每边半径的 14.65%（与宽度或高度相同），假设是一个完美的圆形。
不要忘记元素内部的填充是相对于其容器的宽度的，因此
padding: 14.65%将不起作用除非圆圈位于具有相同宽度的元素内部。2.JavaScript。
字体字符有不同的大小。为此，您将需要：
该脚本可以通过使用带有CSS
display: pre;的内联块元素来计算所有断点（即单词）的宽度来实现此目的。在浏览器调整大小时，您将使用这些宽度来计算每行可以容纳多少个宽度。但是，圆内的每条线的长度都不同，因此您必须根据行高、圆的高度和行数计算出如何包含线的宽度。
这不是一个缓慢的过程，但这样做 onresize 会出现问题，因此我建议使用字体大小和圆圈大小的固定比例大小，这样您就不必全部重做。
或者，在加载生成圆圈后调整圆圈大小的另一种方法是使用具有比例因子的 CSS3 变换。
3. HTML Canvas + JS
您可以使用画布代替，按照下面的解决方案？这会容易得多。即使这样，文本的宽度也会被计算出来，但可能比将每个单词加载到 DOM 中的内联块中要快得多。
将文本绕成 svg 或 canvas 中的圆形
If you want to handle this with only CSS and make it responsive, it's not possible in the way you would like.
However, it can be done with some rather tedious JavaScript.
I provide three alternatives.
1. CSS only, imperfect solution.
Which mathematically, is 14.65% of the radius on each side (which is the same as the width or height), assuming a perfect circle.
Don't forget that padding inside an element is relative to it's container's width, so
padding: 14.65%won't work unless the circle is inside an element with the same width.2. JavaScript.
Font characters have different sizes. To do this, you will need either:
The script could do this by having an inline-block element with the CSS
display: pre;to calculate the width of all the breakpoints (i.e. words). On browser resize, you would use these widths to calculate how many you could fit on each line.However, each line would have a different length inside a circle, so you'd have to work out from the line-height, the circle height and the number of lines how wide the containing line would be.
This isn't a slow process but doing so onresize would be problematic, so I'd advise either using fixed ratio sizing of the font-size and the circle-size, so you wouldn't have to redo it all.
Alternatively, another way to resize the circle after it had been generated on load would be to use a CSS3 Transform with a scale factor.
3. HTML Canvas + JS
You could use a canvas instead, as per the solution below? It would be far easier. Even then, the width of the text is calculated but is likely much faster than loading each word into an inline-block in the DOM.
Wrap text to a circle shape in svg or canvas
没有办法让元素实际上是圆形的，但你绝对可以使圆具有设定的大小，并使用
padding使文本适合适合圆内的最大正方形：http://jsfiddle.net/pk7yk/2/
（示例仅适用于 WebKit 浏览器）
尽管您必须确保圆圈内没有太多文本来容纳。
There is no way to make the element actually be circular, but you can definitely make the circle be of set size and make the text fit into the largest square that would fit inside the circle using
padding:http://jsfiddle.net/pk7yk/2/
(Example only works in WebKit browsers)
Although you do have to make sure there isn't too much text inside the circle to fit.
可以将文本包裹在使用 css3 边框半径创建的圆内。
您只需将填充量添加到边框半径
即可，例如：
CSS:
HTML:
这将导致文本在圆圈内换行。在 FF 中测试。
了解有关使用 css3 创建圆圈的更多信息
内含文字的 css 圆圈。
PS 你必须小心角落，尽管它是看起来是圆形的，该元素实际上是盒子形状的，因此有一个舒适的填充，以避免文本被放置在角落里。
It is possible to wrap text inside a circle created using css3 border radius.
you just have to add the padding amount to the border radius
eg:
CSS:
HTML:
This will cause the text to wrap inside the circle. Tested in FF.
To know more about creating circles using css3
css circle with text wrapped inside.
P.S You have to be careful about the corners, though its looks circular the element is actually box shaped so have a comfortable padding so as to avoid the text being placed in the corners.