没有宽度或高度的CSS圈子？:这可能与纯CSS有关吗？

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中用"no-wrap"显示三行文本,因此3段文本中的每一段都有自己的行并且没有被包装.

我想在圆的中心显示这些,并将圆展开以适合文本行.

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

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

这只能使用CSS,使用百分比还是需要JS解决方案.

提前致谢.

Answer 1

纯CSS解决方案有一些警告

这个小提琴演示了仅使用css的解决方案.它可以完美地(我认为)在现代浏览器(IE9 +,border-radius无论如何都需要)中使用单行文本.注意事项是:

1. 正如您可以通过粉红色的"圆圈"看到的那样,文本必须全部包含在一个元素中(不是粉红色的多个跨度).这不是一个大问题.
2. 为了得到任何形式的"填充"一个都需要把一个透明border的span设置为"填充"大小.这通常也不是一个大问题,因为你不太可能想要在圈内的边界.
3. 正如您在青色圆圈上看到的css所看到的那样,如果需要多行文本(或者在我的情况下强制使用a max-width),则必须根据文本行数设置css for margin-top和topproperties.这可能是一个问题,取决于应用程序.在堆叠版本上,IE9需要overflow: auto设置才能正确调整大小.
4. 正如您可以通过红色圆圈看到的那样,如果缩小显示区域,如果white-space: nowrap未设置并且圆圈开始包裹其单行文本,则会出现圆形的一些卵形扭曲.

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