圈子div中的文字。根据内容调整Div大小

Dan Andreasson 发表于 Dev

和安德烈森

我想创建一个包含文本的div圈（不仅一行）。这是我想要的那种行为：

我想我可以用

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

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

如果文本填满，我希望圆扩大（最小100px）。

和安德烈森

这是我能想到的最好的。它不是我想要的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;
    }
  }
}

Java脚本

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;如果连字符有效，则不需要。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。