圆div内的文字.Div大小调整为内容

Question

我想创建一个带有文本的圆形div(不仅仅是一行).这是我想要的善意行为:

我想我可以用一个

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

但是,如果我不知道高度和宽度怎么办？

如果文本填满,我希望圆圈扩展(最小尺寸100px).

Answer 1

这是我能想到的最好的办法。它没有 100% 达到我想要的效果，但也不是太远了

超文本标记语言

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

社会保障体系

#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));
});

这是一个 JSFiddle 来演示它http://jsfiddle.net/kDvMp/ 连字符在我的应用程序中有效，但在 JSFiddle 中无效。如果连字符有效，则word-break: break-all;不需要。