你如何看到(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插件?
我正在寻找一个圆形的文字区域,而不是平方!文字必须遵循圆形边框,如下所示:
答案 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>
答案 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框中,这是因为它大于框的限制,
修复你需要的
overflow:hidden
,至少会删除那些奇怪的文字流出,http://jsfiddle.net/VWQjj/9/
但是选项1比2 答案 5 :(得分:0)
给div一个边界半径。
{ border-radius:50% }