4

您如何看到（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 插件？

我正在寻找一个圆形的文本区域，而不是平方！文本必须遵循这样的圆形边框：

4

6 回答 6

0

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

#myDiv {
    padding: 2em;
    text-align: center;
}
于 2013-10-14T11:03:39.550 回答
0

您可能需要这样做。

将文本包裹在另一个元素中。将 line-height 设置为父元素上的 div 高度。

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

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

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

演示小提琴

你的小提琴更新了

于 2013-10-14T11:03:43.940 回答
0

尝试使用填充

padding: 40px 40px 10px;
于 2013-10-14T11:06:11.433 回答
0

给 div 一个边界半径。

{ 边界半径：50% }

于 2013-10-14T12:11:31.310 回答
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;

}

// 现在你可以单独控制你的文本了

于 2013-10-14T11:12:48.050 回答
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 更推荐
于 2013-10-14T11:22:03.177 回答