I can turn a div into a circle like this:
.circle {
background-color: rgba(0, 0139, 0139, 0.5);
height: 200px;
width: 200px;
-moz-border-radius:50%;
-webkit-border-radius: 50%;
border-radius:50%;
}
<div class="circle"></div>
</div>
But i have to specify width height:
I want to display three rows of text in DIV's with "no-wrap" so each of the 3 segments of text have there own line and are not wrapped.
I want to display these in the center of a circle and have the circle expand to fit the lines of text.
The text lines will be pulled from a database via PHP, and will vary in character length.
The problem is the method shown above only works if the width / height is specified.
Is this possible with CSS using only, using percentages or would i need a JS work around.
thanks in advance.
To create a circle we can set the border-radius on the element. This will create curved corners on the element. If we set it to 50% it will create a circle. If you set a different width and height we will get an oval instead.
Creating an empty circle with CSS To create an empty circle first of all add an empty <div> element. Use CSS border-radius: 50% to make the div element circular. Additionally set the height, width and border of <div> element.
Set the same value of min-width and min-height for 1 digit number. Use a pseudo element for vertical alignment and to maintain the square shape. With border-radius applies to the container for the circle. Very nice answer.
This fiddle demonstrates a solution using only css. It works flawlessly (I think) in modern browsers (IE9+, which is needed for border-radius
anyway) with single lines of text. Caveats are:
border
on the span
set to the "padding" size. This should also not normally be a big issue, since it is unlikely you would want borders inside the circle.max-width
), then css for margin-top
and top
properties must be set according to the number of text lines. This could be an issue depending on application. On the stacked version, IE9 needed overflow: auto
set to get it to size correctly.white-space: nowrap
is not set and a circle begins wrapping its single line of text, then some ovular distortion of the circle occurs.Each web designer would have to determine if the limitations of this solution can be accounted for or not. If not, then the javascript solution posted here by rgthree should work well. But if only a single line (or some set number of lines, like in my cyan circle) are expected, then this css solution should work well.
All you need to do is replace you height and width with a padding and display inline-block. Reference: http://jsfiddle.net/6mzP7/
.circle {
background-color: rgba(0, 0139, 0139, 0.5);
padding: 200px;
display: inline-block;
-moz-border-radius:50%;
-webkit-border-radius: 50%;
border-radius:50%;
}
<div class="circle"></div>
The HTML can stay the same.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With