javascript - Text within circle div. Div size adjusted to content

Question

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.

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

查询：

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，脚本的微小变化

这是一个更好的解决方案（即使是小文本也能更好地工作）

查询：

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 和一个 span：

然后我会应用一个 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

对于只为一个词寻找解决方案的任何人，我发现了一个仅 css 的，但它需要重复该词两次 - 使用一个作为度量。然后通过填充来完成比率。

.circlecont{
 position:absolute;
 top:10px;
 left:10px;
 color:#fff;
 box-sizing: border-box;
 color: white;
 font-size:10px;
  
}
.circlecont .circle {
  position:absolute;
  top:0;
  left:0;
  background-color: #CE3838;
  width: calc(100% + 10px);
  height: 0;
  padding-bottom: calc(100% + 10px);
  border-radius:50%;
}
.circlecont .measure{
  opacity:0;
}
.circlecont .centeredtext{
   color:#fff;
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
}

<div class="circlecont"><div class="circle"><div class="centeredtext">1111111111111111</div></div><div class="measure">1111111111111111</div></div>

Answer 4

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

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

Answer 5

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