CSS：使用CSS在绘制的圆圈内环绕文本

Question

我正在使用此CSS代码绘制圆圈：

circle {
    background: #f00;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 100px;
    margin:5px;
}

在html中使用此功能，我可以在其中并排显示3个圆圈：

 <circle>Text1</circle>
 <circle>Text2</circle>
 <circle>Text3</circle>

看起来像这样：

现在，如果我想在中间圈中添加更多文本，则会发生以下情况：

<circle>Text1</circle>
<circle>Text2 and more</circle>
<circle>Text3</circle>

无论是谁，我希望'Text2等等'留在第二个圆圈中并且只是环绕。我怎样才能做到这一点？

注意：我不想使用display: table-cell，因为它在响应式网站上效果不佳，如果视图页面很窄，则不会让圈子环绕并保持在彼此之上。

Answer 1

这可能更适合您的需求，行高是您的问题，但这会使您的文字正确居中，您可能需要调整高度/宽度/填充，填充应该是高度的25％

<div class="circle">
  <div class="text">
    hello world i am a circle
   </div>
</div>
<div class="circle">
  <div class="text">
    hello world
   </div>
</div>
<div class="circle">
  <div class="text">
    hello superman i am a red sun
   </div>
</div>

.circle {
    background: #f00;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    margin:5px;
    overflow:hidden;
    padding:25px;
    position:relative;
}
.text{
  transform:translate(-50%,-50%);
  position:absolute;
  top:50%;
  left:50%;
}

Answer 2

行高导致了这种情况。我调整了你的CSS。

circle span {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
}
circle {
  background: #f00;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  margin: 5px;
  position: relative;
}

<circle><span>Text 1</span></circle>
<circle><span>Text 2 and more</span></circle>
<circle><span>Text 3</span></circle>

Answer 3

现在，行高导致了奇怪的偏移。您可以使用flexbox将文本置于圆圈中心。

<div class="circles">
    <circle>Text1</circle>
    <circle>Text2 has more text</circle>
    <circle>Text3</circle>
</div>

.circles{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
circle {
    display: flex;
    margin:5px;
    justify-content: center;
    align-items: center;
    background: #f00;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 50%;
    text-align: center;
}