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 and more”留在第二个圆圈内并环绕。我怎样才能做到这一点？

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

Answer 1

行高导致此问题。我已经调整了你的 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 2

这可能更适合您的需求，line-height 是您的问题，但这将使您的文本正确居中，您可能需要调整 height/width/padding，内边距应为高度的 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 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;
}

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

CSS: wrapping around text inside a drawn circle using CSS

html

css

geometry

word-wrap