使用 CSS 圈出一段文字 [英] Paragraph of text in circle using 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 宽度 来调整左边的空间对于文本.

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 圈出一段文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！