Circle div with text inside the borders

Question

As you can see ( http://jsfiddle.net/m3c_/VWQjj/ ) the text goes beyond the div.

<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 this? Any jQuery plugin?

I am looking for a rounded area of ​​text, not a square! The text should follow a rounded border:

Answer 1

Increase the fill value and center the text:

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

Answer 2

You may need to do this.

Wrap text inside another element. Set the line height to the height of the div on the parent element.

Reset line height for the child (text) element.

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

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

Demo script

Your violin has been updated

Answer 3

padding: 40px 40px 10px;

Answer 4

, .

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

}

//

Answer 5

css css #myDiv

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

fooobar.com/questions/1507042/...

http://jsfiddle.net/VWQjj/8/

, div, - , , ,

,

• ,
• use overflow:hiddenone that at least removes this weird outflow of text, http://jsfiddle.net/VWQjj/9/ but option 1 is more recommended for 2

Answer 6

give div a border radius.

{border radius: 50%}