css – 如何确保文本在圆角div内?

前端之家收集整理的这篇文章主要介绍了css – 如何确保文本在圆角div内?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想让我的圆形div保持文本内。像你在图像上看到的

如何使用CSS?因为我的圆形div,会有这样的文字是平方的。
http://jsfiddle.net/kUJq8/

div {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: #333;
    color: #FFF;
}

解决方法

我创建了一个如何实现这一点的例子。没有一个简单的方法,但是Spudley在不久的将来会来临。 http://jsfiddle.net/kUJq8/5/

这个例子基于http://www.csstextwrap.com使用的相同概念,但我创建了这个例子来解释发生了什么,以及如何实现这个效果

基本上,您需要先创建一个循环,然后创建一些示例文本,然后创建一组“虚拟”浮动div,以使文本指南不会超出并自动换行到下一行。随意玩div的宽度,所以你可以达到预期的效果。另外,如果你删除边框,你可以看到什么样的文本实际上看起来像。设置div的宽度时边框有帮助。

<div style="float:left;clear:left;height:15px;width:130px"></div>
<div style="float:right;clear:right;height:15px;width:130px"></div>

在我的例子中,我没有创建整个圈子,但是应该足够让你走上正轨。如果您需要任何进一步的帮助,请通知我。谢谢。

猜你在找的CSS相关文章