javascript - 円 div 内のテキスト。コンテンツに合わせて分割サイズを調整

Question

テキストを含むサークルdivを作成したい(1行だけではない)。これは私が望む親切な振る舞いです:

で達成できると思います

text-align: center;
vertical-align: middle;

しかし、高さと幅がわからない場合はどうすればよいでしょうか。

テキストがいっぱいになっている場合は、円を拡大します（最小サイズ100px）。

Answer 1

ここにきれいなスクリプトの方法があります。

HTML:

<div><span>Your text</span></div>

CSS:

*
{
    margin: 0;
    padding: 0;
}
div
{
    display: inline-block;
    border: 1px solid black;
    border-radius: 50%;
    text-align: center;
}
    div:before
    {
        content: '';
        display: inline-block;
        height:100%;
        vertical-align: middle;
    }

span
{
    vertical-align: middle;
    display: inline-block;
}

JQuery:

var width = Math.sqrt($("span").width() * $("span").height());
var sqrt2 = Math.sqrt(2);
$("span").height(width);
$("span").width(width);
$("div").width(sqrt2 * width);
$("div").height(sqrt2 * width);

単語間のスペースとそれらがどのように壊れているかのため..この解決策は小さなテキストでバグる可能性があります.

同じ HTML と CSS、スクリプトの小さな変更

これがより良い解決策です（小さなテキストでもうまく機能します）

JQuery:

var div = $("div");
var span = $("span");

span.width(Math.sqrt(span.width() * span.height()));
span.width(Math.sqrt(span.width() * span.height()));
div.width(Math.sqrt(2) * span.width());
div.height(div.width());

そのセリフを繰り返す理由

span.width(Math.sqrt(span.width() * span.height()));

これは、使用すればするほど、テキストの周りのスパンのスケーリングが改善されるためです。（テキストの周りの円がきつくなります）

Answer 2

これが何らかの形で役立つことを願っていますが、すべてのコンテンツがサークル内にあることを保証するものではないことに注意してください!

コンテンツへの div とスパンを作成します。

そして、CSS を適用して、円のようになる半径で div を縁取ります。スパンの垂直方向の位置合わせは、中央に配置する必要があります。

<div>
<span>Content goes here</span>
</div>

そしてCSS：

div{
border-style:solid;
border-color: black;
width: 300px;
height:300px;
text-align: center;
border-radius: 300px;
vertical-align:middle;
display:table;
padding: 5px;
}

span{
display:table-cell;
vertical-align:middle;
}

ここでテストできます: http://jsfiddle.net/S3cNW/

Answer 3

これは私が思いつくことができる最高のものです。思ったように 100% は機能しませんが、そう遠くないところにあります

HTML

 <div id="balls">
    <div class="ball">
        <div class="message">Some megathoughts</div>
    </div>
   <div class="ball">
        <div class="message">Lorem ipsum whatever</div>
    </div>
    <div class="ball">
        <div class="message">Lorem ipsum superduperlongword</div>
    </div>
    <div class="ball">
        <div class="message">Lorem ipsum whatever</div>
    </div>
    <div class="ball">
        <div class="message">Lorem </div>
    </div>
</div>

SCSS

#balls {
  .ball {
    float: left;
    margin-right: 5px;
    width:50px;
    text-align: center;
    border-radius: 50%;
    vertical-align:middle;
    display:table;
    padding: 8px;
    border: 1px solid #222;
    .message {
      display:table-cell;
      vertical-align:middle;
      border-radius: 50%;
      text-align: center;
      -moz-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
      word-break:break-all;
    }
  }
}

Javascript

var fix_size = function(ball){
    var size = ball.height()+10;
    ball.width(size).height(size);
};

$.each($('.ball'), function(index, ball){
        fix_size($(ball));
});

http://jsfiddle.net/kDvMp/ ハイフンは私のアプリケーションでは機能しますが、JSFiddle では機能しません。word-break: break-all;ハイフンが機能する場合は必要ありません。

Answer 4

純粋な CSS: http://jsfiddle.net/MrPolywhirl/P55FL/

div {
    background-color:#EEE;
    border-style:solid;
    border-color:#000;
    width:200px;
    height:200px;
    border-radius:50%;
    padding:0 4%;
    overflow:hidden;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}