如何围绕文本制作圆圈，圆圈面积尽可能小？

Question

我希望文本周围有一个圆圈，以便文本在垂直和水平方向上占据圆圈的大部分区域，但它应该是圆圈，不是一个椭圆。

这也意味着如果我有一条长线，它会在圆圈内包裹。

高级文本长度未知，如果超出圆圈的可能大小，则圆圈应相应增长。

像这样，但没有svg：

是否可以只使用CSS和HTML？

Answer 1

目前还没有这样的CSS / HTML解决方案，人们可​​以告诉某个元素其内容同时向侧面和向下增长，因此要实现这一点，您需要一个脚本。

可能的解决方法可能是这样的，其中设置宽度并使用伪元素创建实际圆。有了这个，你只需要调整文本长度的宽度，其余的是自动的。

div {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 100px;
  padding: 30px;
}
div + div {
  width: 140px;
}

div::after {
  content: '';
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid gray;
  padding-bottom: 100%;
}

<div>Hi there, this might be an option for you to use, where the text is a sample</div>

<div>Hi there, this might be an option for you to use, where the text is a sample. Hi there, this might be an option for you to use, where the text is a sample</div>

Answer 2

根据您的要求，您可以执行以下操作。请注意，您需要设置宽度和高度。我不能想到一种方法，这种方法可以使用没有固定高度或宽度的内容，因为它需要值来计算半径。

.circle {
  height: 300px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: rebeccapurple;
}
.circle p {
    width: 300px;
    margin: 0 auto;
    color: white;
}

<div class="circle">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit assumenda sapiente, sunt eveniet quibusdam quas numquam ea libero molestiae nesciunt! Molestias, illum, excepturi. Totam, aliquam. Natus ipsum, earum vero minima!</p>
</div>

Answer 3

像@Andy Holmes所说的那样，是的，这里有一些例子：

.test  {
border-radius: 50%;
  width: 200px;
  height: 200px;
  border: 1px solid red;
  text-align: center;
  }

p {
  margin-top: 85px;
  }

<div class="test">
	<p>Your text</p>
</div>