I want to create a circle div with text in (not only one line). This is the kind behavior I want:
That I guess I can achieve with a
text-align: center; vertical-align: middle; But what if I don't know the height and width?
I want the circle to expand (min-size 100px) if the text is filling it up.
So here is the clean Script way.
HTML:
<div><span>Your text</span></div> CSS:
* { margin: 0; padding: 0; } div { display: inline-block; border: 1px solid black; border-radius: 50%; text-align: center; } div:before { content: ''; display: inline-block; height:100%; vertical-align: middle; } span { vertical-align: middle; display: inline-block; } JQuery:
var width = Math.sqrt($("span").width() * $("span").height()); var sqrt2 = Math.sqrt(2); $("span").height(width); $("span").width(width); $("div").width(sqrt2 * width); $("div").height(sqrt2 * width); because of spaces between the word, and how they break.. this solution may bug on small texts.
Here's a better solution (works better even with small texts)
JQuery:
var div = $("div"); var span = $("span"); span.width(Math.sqrt(span.width() * span.height())); span.width(Math.sqrt(span.width() * span.height())); div.width(Math.sqrt(2) * span.width()); div.height(div.width()); the reason that I repeat that line
span.width(Math.sqrt(span.width() * span.height())); its because the more I use it, the better I scale of the span around the text. (causing the circle to be tighter around the text)
Hope this helps you in any way, but be aware that it does not guarantee that all the content will be inside the circle!
I would create a div and a span to the content:
And then I would apply a CSS to border the div with a radius that would make it like a circle. Vertical alignmento of the span should place it in the middle.
<div> <span>Content goes here</span> </div> And the CSS:
div{ border-style:solid; border-color: black; width: 300px; height:300px; text-align: center; border-radius: 300px; vertical-align:middle; display:table; padding: 5px; } span{ display:table-cell; vertical-align:middle; } You may test it here: http://jsfiddle.net/S3cNW/
For anyone looking for a solution for one word only, I found a css-only, but it requires echoing the word twice - using one as measure. The ratio is then done by padding.
.circlecont{ position:absolute; top:10px; left:10px; color:#fff; box-sizing: border-box; color: white; font-size:10px; } .circlecont .circle { position:absolute; top:0; left:0; background-color: #CE3838; width: calc(100% + 10px); height: 0; padding-bottom: calc(100% + 10px); border-radius:50%; } .circlecont .measure{ opacity:0; } .circlecont .centeredtext{ color:#fff; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }<div class="circlecont"><div class="circle"><div class="centeredtext">1111111111111111</div></div><div class="measure">1111111111111111</div></div>This is the best I could come up with. It works not 100% as I wanted, but it's not too far away
HTML
<div id="balls"> <div class="ball"> <div class="message">Some megathoughts</div> </div> <div class="ball"> <div class="message">Lorem ipsum whatever</div> </div> <div class="ball"> <div class="message">Lorem ipsum superduperlongword</div> </div> <div class="ball"> <div class="message">Lorem ipsum whatever</div> </div> <div class="ball"> <div class="message">Lorem </div> </div> </div> SCSS
#balls { .ball { float: left; margin-right: 5px; width:50px; text-align: center; border-radius: 50%; vertical-align:middle; display:table; padding: 8px; border: 1px solid #222; .message { display:table-cell; vertical-align:middle; border-radius: 50%; text-align: center; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; word-break:break-all; } } } Javascript
var fix_size = function(ball){ var size = ball.height()+10; ball.width(size).height(size); }; $.each($('.ball'), function(index, ball){ fix_size($(ball)); }); Here is a JSFiddle to demonstrate it http://jsfiddle.net/kDvMp/ The hyphens works in my application, but not in JSFiddle. the word-break: break-all; is not needed if hyphens works.
Pure CSS: http://jsfiddle.net/MrPolywhirl/P55FL/
div { background-color:#EEE; border-style:solid; border-color:#000; width:200px; height:200px; border-radius:50%; padding:0 4%; overflow:hidden; display:table-cell; text-align:center; vertical-align:middle; } 