圆圈div与边框内的文本

Question

你如何看到（http://jsfiddle.net/m3c_/VWQjj/）文字在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;
}

我该如何解决？任何jQuery插件？

我正在寻找一个圆形的文字区域，而不是平方！文字必须遵循圆形边框，如下所示：

Answer 1

增加填充值并使文本居中：

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

Answer 2

您可能需要这样做。

将文本换行到另一个元素中。 在父元素上将line-height设置为div高度。

重置子（文本）元素的行高。

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

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

Demo Fiddle

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

看一下这个答案https://stackoverflow.com/a/18498206/829533

您的更新代码将显示在此http://jsfiddle.net/VWQjj/8/

中

现在您会注意到文本仍然在div框中，这是因为它大于框的限制，

修复你需要的

1. 删除一些文字或增加框的大小，
2. 使用overflow:hidden，至少会删除那些奇怪的文字流出，http://jsfiddle.net/VWQjj/9/ 但是选项1比2
更值得推荐

Answer 6

给div一个边界半径。

{ border-radius：50％ }