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:

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.

I see a problem in making the dynamic div to have equal height and width. it can be done without a script, but it will be messy. — avrahamcool, Oct 03 '13 at 21:49
I'd love to see the messy way compared to the 'clean' js way! — Dan Andreasson, Oct 03 '13 at 21:53
I have a feeling it involves a bunch of `div` elements floating left and right with percent widths and heights to fill the circle's containing box. — jsea, Oct 03 '13 at 21:57
I'm working on an example to explain what I meant for funsies. — jsea, Oct 03 '13 at 22:03
Yuriy's link may be your best bet. Here's a pure HTML/CSS solution, but it is also messy and it requires a specified height and width that fits your content: http://jsfiddle.net/Agmyg/1/ It's kind of crappy, but I figured I would post it anyway for fun since it actually wraps text into a circle-ish shape. Hahaha. — jsea, Oct 03 '13 at 22:17
A bit late to the party, but here is a [CSS only solution](http://stackoverflow.com/a/9359039/607874). Check the last update titled "Resize with content" — Jose Rui Santos, Aug 15 '16 at 11:53

avrahamcool · Answer 1 · 2013-10-04T12:00:44.833

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)

edited Oct 04 '13 at 12:00

answered Oct 03 '13 at 21:58

avrahamcool

13,888
5
47
58

Oh, I have a little bug there. let me try again. I'll comment when its ready. – avrahamcool Oct 03 '13 at 22:07
1

Edited my answer. check it now. – avrahamcool Oct 03 '13 at 22:37
That is kinda what I was looking for. Any chance you can make the text behave like in the image? – Dan Andreasson Oct 04 '13 at 11:32
I tried but failed to achieved that. I believe its not achievable with the current CSS/HTML spec. (without breaking the simple layout, with tons of floating div's and such..). the text must be enclosed in a rectangle inside that circle.. – avrahamcool Oct 04 '13 at 11:57
1

Absolutely the best solution I've seen for this online -- countless code examples look fine for the limited content provided but start distorting as soon as you add another line of text. Yours keeps expanding perfectly no matter how much text is added, exactly what I need. Kudos. – jimiayler Aug 07 '20 at 19:38

score 2 · Answer 2 · answered Oct 03 '13 at 22:05

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/

That is how I've done it right now, but as you mention: it does not guarantee that all the content will be inside the circle, here lies my problem — Dan Andreasson, Oct 03 '13 at 22:07

Fanky · Answer 3 · 2019-01-22T15:54:42.507

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>

score 0 · Accepted Answer · answered Oct 18 '13 at 13:26

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.

score -4 · Answer 5 · answered Oct 03 '13 at 22:17

-4

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

answered Oct 03 '13 at 22:17

Mr. Polywhirl

42,981
12
84
132

Fixed width & height. – avrahamcool Oct 03 '13 at 22:21
With long messages it does not expand size as expected, but only on height – Dan Andreasson Oct 03 '13 at 22:22

Text within circle div. Div size adjusted to content

5 Answers5

same HTML & CSS, minor changes in Script

Linked

Related