Circle div with text inside borders

Question

How you can see (http://jsfiddle.net/m3c_/VWQjj/) text go outside div border.

<div id="myDiv">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

#myDiv {
    width: 150px;
    height: 150px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid #000;
    background-color: #00b7ea;
    padding: 10px;
}

How can I fix it? Any jQuery Plugin?

I'm looking for a rounded text area, not squared! Text must follow a rounded border like this:

Yes, same problem but i search a different solution. A lot of additional markup is not a good idea...IMHO. — m3c, Oct 14 '13 at 11:41
IMHO, I think that @Johnツ solution is actually the only possible way. There's actually not a valid and easy solution to align text in a non-regular shape, such as a circle. Only HTML elements aligned with CSS or a JS solution can give what you are looking for. Maybe a further solution could be found in using CANVAS, but you still have to follow the programming approach to align the text into the shape. — Ragnarokkr, Oct 14 '13 at 13:40
Following edit 2, this functionality is not possible using pure CSS. All HTML elements are rectangular. — Chris Pickford, Oct 14 '13 at 13:46
Yep I don't looking for a pure HTML solution... but maybe, a jquery plugin...?Somethings like this: http://baconforme.com/ In fourth example, if you use this: 175 0 0 75 0 225 175 300 175 0 0 75 0 225 175 300 you can have A way... I hope not the only one. — m3c, Oct 14 '13 at 14:40
take a look at my answer [here](http://stackoverflow.com/questions/19169806/text-within-circle-div-div-size-adjusted-to-content/19169939#19169939) — avrahamcool, Oct 15 '13 at 07:29
@avrahamcool thx for help but it don't fix my problem, I don't want a ectangle inside the circle... — m3c, Oct 15 '13 at 07:55

score 0 · Answer 1 · answered Oct 14 '13 at 11:03

0

Increase the padding value and center the text:

#myDiv {
    padding: 2em;
    text-align: center;
}

answered Oct 14 '13 at 11:03

Chris Pickford

8,642
5
42
73

not fix my problem man, see edit please... – m3c Oct 14 '13 at 12:37
You are trying to create a circular element, which is not possible. All HTML elements are rectangular blocks. You could achieve your desired result using a stack of spans with set width but it would be messy. – Chris Pickford Oct 14 '13 at 13:44
I know but I looking for a jQuery Plugin that can help me. – m3c Oct 15 '13 at 07:57

Vinay Pratap Singh Bhadauria · Answer 2 · 2013-10-14T11:09:31.967

0

You can need to do like this.

Wrap the text within another element. Set line-height to div height on the parent element.

Reset the line height on child (text) element.

<div class="ff"><span>This works</span></div>

<div class="ff"><span>Even this is working</span></div>

Demo Fiddle

Your fiddle Updated

edited Oct 14 '13 at 11:09

answered Oct 14 '13 at 11:03

Vinay Pratap Singh Bhadauria

9,829
3
28
49

thx, good hack but there is a lot of empty spaces on top and bottom... in my idea, text must fill all the div... – m3c Oct 14 '13 at 12:03

score 0 · Answer 3 · answered Oct 14 '13 at 11:06

0

Try playing with the padding

padding: 40px 40px 10px;

answered Oct 14 '13 at 11:06

Andrei Cristian Prodan

1,114
4
17
34

Thx but it don't fix my problem. Text don't follow circle border, I need a "bubble text area" not a "square text area"... – m3c Oct 14 '13 at 11:45

score 0 · Answer 4 · answered Oct 14 '13 at 11:12

you have to keep your design as it is . don't change it

<div id="myDiv">
       <div id="my_text">Lorem ipsum dolor sit amet, consectetur  
        adipisicing   
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> 
    </div>
 #myDiv {
width: 150px;
height: 150px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 2px solid #000;
background-color: #00b7ea;
text-align:center;



 padding: 10px;
  }
  #my_text
{
position:relative;top:16px;

}

// now you can control your text alone

yes, alone but in a squared mode... see edit please. – m3c Oct 14 '13 at 12:38 — m3c, Oct 14 '13 at 12:38

score 0 · Answer 5 · edited May 23 '17 at 12:13

0

you need to use this css attributes into your css class #myDiv

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Have a look at this answer https://stackoverflow.com/a/18498206/829533

your updated code will show like in this http://jsfiddle.net/VWQjj/8/

now you will notice still the text is going out of your div box, this is because of the is larger then the limit of the box,

to fix that you need to

remove some text or increase the size of box,
use overflow:hidden that will at least remove those weird text outflow, http://jsfiddle.net/VWQjj/9/ but option 1 is more recommend over the 2

edited May 23 '17 at 12:13

Community

1
1

answered Oct 14 '13 at 11:22

zzlalani

22,960
16
44
73

box-sizing have not any effect and overflow cut my text. When increase box size or remove text I move the problem, don't fix it... – m3c Oct 14 '13 at 12:00
what browser you are using? did you check the demo link i showed you? http://jsfiddle.net/VWQjj/8/ – zzlalani Oct 14 '13 at 12:14
well i have written clearly that `overflow:hidden` will cut the text and since you need to increase the box size and/or decrease the text and/or text size so show it in the box, – zzlalani Oct 14 '13 at 12:16
but this is only helpful if the `box-sizing` works for you.. `box-sizing` and increasing decreasing stuffs are not two different solutions. – zzlalani Oct 14 '13 at 12:19
google chrome for win 7, latest dev release. this is how you fiddle works... http://img39.imageshack.us/img39/8444/i4fh.jpg i've updated box size how you can see. – m3c Oct 14 '13 at 12:36

score 0 · Answer 6 · answered Oct 14 '13 at 12:11

0

give the div a border radius.

{ border-radius : 50% }

answered Oct 14 '13 at 12:11

Strikers

4,698
2
28
58

ehm... what? I already do this... – m3c Oct 14 '13 at 12:38

Circle div with text inside borders

6 Answers6