圆圈内的文字。 Div大小已调整为内容 [英] Text within circle div. Div size adjusted to content

问题描述

我想创建一个带有文本的圆形div（不只是一行）。这是我想要的那种行为：

我想我可以用

来实现

  text-align：center; 
 vertical-align：middle; 
  

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

如果文本填满，我想要圈子展开（最小大小为100像素）。

解决方案

这是我能想出的最好的。

 
 code>< div id =balls> 
< div class =ball> 
< div class =message>一些巨人< / 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（） 
 ball.width（size）.height（size）; 
}; 
 
 $ .each（$（'。ball'），function（index，ball）{
 fix_size（$（ball））; 
}）; 
  

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

I want to create a circle div with text in (not only one line). This is the kind behavior I want:

That I guess I can achieve with a

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

But what if I don't know the height and width?

I want the circle to expand (min-size 100px) if the text is filling it up.

解决方案

This is the best I could come up with. It works not 100% as I wanted, but it's not too far away

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

Here is a JSFiddle to demonstrate it http://jsfiddle.net/kDvMp/ The hyphens works in my application, but not in JSFiddle. the word-break: break-all; is not needed if hyphens works.

这篇关于圆圈内的文字。 Div大小已调整为内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！