Text within circle div. Div size adjusted to content

Question

I want to create a circle div with text in (not only one line). This is the kind behavior I want:

Answer 1

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/

Answer 2

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;
}

Answer 3

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.

same HTML & CSS, minor changes in Script

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)

Answer 4

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.

Answer 5

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>