jquery – 没有宽度或高度的CSS圈子？是否可以使用纯CSS？

我可以把div变成一个这样的圈子：

.circle {
 background-color: rgba(0,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的工作.

提前致谢.

解决方法

纯CSS解决方案与一些注意事项

This fiddle demonstrates a solution using only css.它在现代浏览器(IE9,这是边框半径需要的)与单行文本完美无缺(我认为).注意事项是：

>正如你可以看到的粉红色的“圆圈”,文本都必须包含在一个单一的元素(不像粉红色的多个跨度).这不是一个大问题.
>要获得任何种类的“填充”,需要在跨度设置为“padding”大小上放置一个透明边框.这通常也不是一个大问题,因为你不太可能想要圈内的边框.
>如你所看到的青色圆圈上的CSS,如果预期有多行文本(或在我的情况下被强制为最大宽度),则必须根据最大宽度的数量来设置边框顶部和顶部属性的CSS文字行.这可能是一个取决于应用程序的问题.在堆叠版本中,IE9需要溢出：自动设置才能使其正确大小.
>如果缩小显示区域,红眼圈可以看到,如果没有设置白色空间：Nowrap,并且圆圈开始包裹其单行文本,则会发生圆的一些卵形畸变.

每个网页设计师都必须确定这个解决方案的限制是否可以被考虑.如果没有,那么由rgthree发布的javascript解决方案应该能够正常运行.但是如果预期只有一行(或者一些设置的行数,就像我的青色圆圈),那么这个css解决方案应该能够正常运行.