使用 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 浮动到文本的左侧和右侧，并通过更改 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 和其他标记.拍打包含该文本的图像不是解决方案.最好的情况是，该解决方案将具有干净的 HTML 标记，只需对 CSS 进行少量调整.

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 的圆形文本段落的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！