CSS3 Circle with text wrap - css

Question

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?

Answer 1

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:
a monospace (or close) font.
to come up with a script to calculate the width on the fly.
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

Answer 2

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.

Answer 3

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:
border-radius is the width/ height divided by 2. The element must be
a perfect square to get a perfect circle. then add the padding amt to
the border radius
CSS:
.testCircle{
width:200px;
height:200px;
border-radius:150px;
background-color:#333;
padding: 50px;
}
HTML:
<div class="testCircle">
Text inside a circle
</div>
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.