圆圈div与边框内的文本

时间:2013-10-14 10:59:21

标签: javascript jquery html css css3

你如何看到(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插件?

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

6 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

您可能需要这样做。

将文本换行到另一个元素中。 在父元素上将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

答案 2 :(得分:0)

尝试使用填充

padding: 40px 40px 10px;

答案 3 :(得分:0)

你必须保持你的设计不变。不要改变它

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

}

//现在您可以单独控制文字了

答案 4 :(得分:0)

您需要将此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
  3. 更值得推荐

答案 5 :(得分:0)

给div一个边界半径。

{ border-radius:50% }