jquery - 没有宽度或高度的 CSS 圆圈？ : Is this possible with pure CSS or not?

Question

我可以像这样把一个 div 变成一个圆圈:

.circle {
 background-color: rgba(0, 0139, 0139, 0.5);
 height: 200px;
 width: 200px;
 -moz-border-radius:50%;
 -webkit-border-radius: 50%;
 border-radius:50%;
}

<div class="circle"></div>
</div>

但我必须指定宽度高度:

我想在 DIV 中使用“不换行”显示三行文本，这样 3 段文本中的每一行都有自己的行并且不换行。

我想在圆的中心显示这些，并让圆扩大以适合文本行。

文本行将通过 PHP 从数据库中提取，并且字符长度会有所不同。

问题是上面显示的方法只有在指定了宽度/高度时才有效。

这是否可能仅使用 CSS，使用百分比还是我需要 JS 解决。

提前致谢。

Answer 1

带有一些注意事项的纯 CSS 解决方案

This fiddle demonstrates a solution using only css .它在现代浏览器(IE9+，border-radius 无论如何都需要)单行文本 中完美运行(我认为)。注意事项是:

1. 正如您从粉红色“圆圈”中看到的那样，文本必须全部包含在单个元素中(而不是粉红色中的多个跨度)。这不是什么大问题。
2. 要获得任何类型的“填充”，需要在设置为“填充”大小的span 上放置一个透明的border。这通常也不是什么大问题，因为您不太可能希望圆圈内有边框。
3. 正如您在青色圆圈上的 css 所见，如果需要多行文本(或者在我的情况下由 max-width 强制), 那么 margin-top 和 top 属性的css必须根据文本行数设置。这可能是一个问题，具体取决于应用程序。在堆叠版本中，IE9 需要设置 overflow: auto 以使其大小正确。
4. 如果您缩小显示区域，您可以通过红色圆圈看到，如果未设置 white-space: nowrap 并且一个圆圈开始包裹它的单行文本，那么一些卵形扭曲圆圈出现。

每个网页设计师都必须确定是否可以考虑此解决方案的局限性。如果没有，那么 rgthree 在此处发布的 javascript 解决方案应该可以正常工作。但是，如果只需要一行(或一定数量的行，例如我的青色圆圈)，那么此 css 解决方案应该可以正常工作。