我一直在寻找一个快速而合适的解决方案，将段落文本放置在圆形内。我发现有两种解决方案。
将多个相同高度的div浮动到文本左右两侧，并通过更改div的width来调整留给文本的空间。
使用相同功能的生成器，http://www.csstextwrap.com/index.php。
我不是在寻找这个，但也许有人需要，我认为将其作为一个链接很好 > http://csswarp.eleqtriq.com/ 这是一个基于Web的生成器，可帮助您将文本围绕圆形包装。
除了添加浮动div和其他标记之外，是否有更简单的解决方案可将段落文本放入圆形中。使用包含该文本的图像也不是解决方案。最理想的情况下，解决方案将具有干净的HTML标记，并在CSS中进行少量调整。
Eric Meyer的书"Eric Meyer on CSS"谈到了这个问题(项目10)，而你找到的文本换行解决方案使用了相同的原则。
简单地使用border-radius:50%不会影响内容框的形状，它们目前仍然是矩形的。例如，可以查看Kyle Sevenoaks的演示。
有一个CSS3模块正在开发中，可以解决这个问题:
http://dev.w3.org/csswg/css-shapes
然而，该规范仍处于草案阶段，目前还没有得到支持，可能需要一两年的时间。
简短的回答是否定的，但希望评论能提供一些见解。
你好，我认为如果不使用JavaScript，这是不可能实现的，因此请使用JavaScript和CSS3。
.badge {
position: relative;
width: 400px;
border-radius: 50%;
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
}
h1 span {
font: 26px Monaco, MonoSpace;
height: 200px;
position: absolute;
width: 20px;
left: 0;
top: 0;
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
}
.char1 {
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);
}
.char2 {
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-ms-transform: rotate(12deg);
-o-transform: rotate(12deg);
transform: rotate(12deg);
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://css-tricks.com/examples/BlurredText/js/jquery.lettering.js"></script>
<script>
$(function() {
$("h1").lettering();
});
</script>
</head>
<body>
<div id="page-wrap">
<div class="badge">
<h1>Established 2012</h1>
</div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="250"></canvas>
<script>
function drawTextAlongArc(context, str, centerX, centerY, radius, angle) {
var len = str.length, s;
context.save();
context.translate(centerX, centerY);
context.rotate(-1 * angle / 2);
context.rotate(-1 * (angle / len) / 2);
for(var n = 0; n < len; n++) {
context.rotate(angle / len);
context.save();
context.translate(0, -1 * radius);
s = str[n];
context.fillText(s, 0, 0);
context.restore();
}
context.restore();
}
var canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d'),
centerX = canvas.width / 2,
centerY = canvas.height - 30,
angle = Math.PI * 0.8,
radius = 150;
context.font = '30pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'blue';
context.strokeStyle = 'blue';
context.lineWidth = 4;
drawTextAlongArc(context, 'Text along arc path', centerX, centerY, radius, angle);
// draw circle underneath text
context.arc(centerX, centerY, radius - 10, 0, 2 * Math.PI, false);
context.stroke();
</script>
</body>
</html>
点击这里查看另一种解决方案（jsfiddle）。
function writeInCircle(phrase, cx, cy, fontSize) {
var num = phrase.length
var r = num * fontSize / 6
var d = $("<div>").addClass("writeInCircle").appendTo("body")
$(d).css({position:"absolute",
width: (2*r) + "px",
height: (2*r) + "px",
left: (cx-r) + "px",
top: (cy-r) + "px"})
for (var i=0; i < num; i++) {
var s = $("<span>").html( phrase.charAt(i)).appendTo(d)
a = i/num *2*Math.PI
var x = cx + r*Math.cos(a)
var y = cy + r*Math.sin(a)
$(s).css({"position":"absolute",
left: x + "px", top: y + "px",
"fontSize": fontSize, "transform":"rotate(" + a + "rad)" })
console.log(z.charAt(i) + " " + x + "," + y)
}
}
请查看以下链接：http://jsfiddle.net/alemarch/42o8hqb7/ http://jsfiddle.net/alemarch/42o8hqb7/1/ http://jsfiddle.net/alemarch/42o8hqb7/2/ http://jsfiddle.net/alemarch/42o8hqb7/3/