使用CSS的圆圈中的文本段落 [英] Paragraph of text in circle using CSS

查看:294
本文介绍了使用CSS的圆圈中的文本段落的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在寻找一个体面和快速的解决方案如何将一段文字放在一个圆圈。我发现有两个解决方案。

I have been looking around for a decent and fast solution on how to place a paragraph of text inside a circle. I found there are two solutions.

浮动多个 div s与文本右侧的文本具有相同的高度,并通过更改div width 来调整文本的剩余空间。

Float multiple div's of the same height as the text to the left an right of the text, and by changing the divs width you adjust the space left over for the text.

使用生成器执行同样的操作, http://www.csstextwrap.com/index.php

Use the generator for the same thing, http://www.csstextwrap.com/index.php.

我不是在找这个,但也许有人可能需要它,我认为它很好的有它作为一个链接> http://csswarp.eleqtriq.com/ 它是一个基于网络的生成器,可以帮助你将你的文本包围圆周。

I am not looking for this, but maybe someone might need it, and I think its nice to have it as a link > http://csswarp.eleqtriq.com/ Its a web based generator that helps you wrap your text around the circle.

有一个更简单的解决方案,将文本段落放在一个圆圈内,而不必添加浮动div和额外的标记。拍摄包含该文本的图像不是解决方案。

Is there a simpler solution to putting paragraph of text inside a circle without having to add floating div's and additional markup. Slapping an image that contains that text is not a solution. The best case scenario, the solution would have clean HTML markup with few tweaks in the CSS.

推荐答案

Eric Meyer的书Eric Meyer on CSS谈论这个(项目10)和你发现的文本换行解决方案使用相同的原则。

Eric Meyer's book "Eric Meyer on CSS" talks about this (Project 10) and the text wrap solutions that you found use the same principle.

使用简单的 border-radius:50%不会影响内容框的形状,此时。例如,请参阅Kyle Sevenoaks的 演示

Using a simple border-radius: 50% does not affect the shape of the content box, which are rectangular at this time. For example, see the demo by Kyle Sevenoaks.

正在开发的一个CSS3模块可解决此问题:

There is a CSS3 module under development that addresses this issue:

http://dev.w3.org/csswg/css-shapes

但是,此规范仍处于草稿模式,目前不支持,可能一两年了。

However, this spec is still in draft mode and not currently supported, probably a year or two out.

简短的答案是没有,但希望评论可以提供一些洞察力。

The short answer is no, but hopefully the comments will provide some insight.

这篇关于使用CSS的圆圈中的文本段落的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆