我一直在寻找一个关于如何将一段文本放在一个圆圈内的体面和快速的解决方案。我发现有两种解决方案。
将多个与文本高度相同的div浮动到文本的左侧和右侧，并通过更改 div 的宽度来调整剩余的文本空间。
为同样的事情使用生成器，http://www.csstextwrap.com/index.php。
我不是在寻找这个，但也许有人可能需要它，我认为将它作为链接很好> http://csswarp.eleqtriq.com/它是一个基于网络的生成器，可以帮助您将文本环绕在圆圈中.
有没有更简单的解决方案可以将一段文本放在一个圆圈内，而无需添加浮动 div 和其他标记。拍打包含该文本的图像不是解决方案。最好的情况是，该解决方案将具有干净的 HTML 标记，只需对 CSS 进行少量调整。
Eric Meyer 的“Eric Meyer on CSS”一书谈到了这一点（项目 10）以及您发现的文本换行解决方案使用相同的原理。
使用简单border-radius: 50%不影响内容框的形状，此时内容框为矩形。例如，请参阅 Kyle Sevenoaks 的演示。
有一个 CSS3 模块正在开发中来解决这个问题：
http://dev.w3.org/csswg/css-shapes
但是，此规范仍处于草稿模式，目前尚不支持，可能要等一两年。
简短的回答是否定的，但希望评论能提供一些见解。
嗨，我认为没有 js，我认为这是不可能的，所以使用 js 和 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/