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

前端之家收集整理的这篇文章主要介绍了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解决方案应该能够正常运行.

原文链接:https://www.f2er.com/jquery/176494.html

猜你在找的jQuery相关文章