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

この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 に答える
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 に答える