Html 使用CSS在圆圈中的文本段落
我一直在寻找一个体面和快速的解决方案，如何放置一段文字内的一个圆圈。我发现有两种解决方案 解决方案1 在文本的左侧和右侧浮动多个与文本高度相同的div，并通过更改divs宽度来调整文本的剩余空间 解决方案2 使用发电机进行相同的操作 奖金（不是问题的一部分，只是提示） 我不是在找这个，但可能有人需要它，我认为它作为一个链接是很好的>它是一个基于网络的生成器，可以帮助你将文本环绕在圆圈中 问题是什么？ 有没有一种更简单的方法可以将文本段落放在圆圈内，而不必添加浮动div和其他标记。拍击包含该文本的图像不是解决方案。最好的情况是，该解决方案具有干净的HTML标记，CSS中几乎没有调整。Eric Meyer的书“Eric Meyer on CSS”讨论了这一点（项目10），并且您发现的文本包装解决方案使用了相同的原理 使用简单的Html 使用CSS在圆圈中的文本段落,html,css,text,geometry,paragraph,Html,Css,Text,Geometry,Paragraph,我一直在寻找一个体面和快速的解决方案，如何放置一段文字内的一个圆圈。我发现有两种解决方案 解决方案1 在文本的左侧和右侧浮动多个与文本高度相同的div，并通过更改divs宽度来调整文本的剩余空间 解决方案2 使用发电机进行相同的操作 奖金（不是问题的一部分，只是提示） 我不是在找这个，但可能有人需要它，我认为它作为一个链接是很好的>它是一个基于网络的生成器，可以帮助你将文本环绕在圆圈中 问题是什么？ 有没有一种更简单的方法可以将文本段落放在圆圈内，而不必添加浮动div和其他标记。拍击包含该文本的
边框半径：50%
<!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>
身体{
边际：0px；
填充：0px；
}
函数drawTextAlongArc（上下文、str、centerX、centerY、半径、角度）{
var len=str.length，s；
context.save（）；
上下文。翻译（centerX、centerY）；
旋转（-1*角度/2）；
旋转（-1*（角度/透镜）/2）；
对于（变量n=0；n 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)
}
}
函数writeInCircle（短语、cx、cy、fontSize）{
var num=短语长度
var r=num*fontSize/6
var d=$（“”）.addClass（“writeInCircle”）.appendTo（“body”）
$（d）.css（{位置：“绝对”，
宽度：（2*r）+“px”，
高度：（2*r）+“px”，
左：（cx-r）+“px”，
顶部：（cy-r）+“px”}）
对于（变量i=0；i请参见嗨，我认为没有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>
.badge{
位置：相对位置；
宽度：400px；
边界半径：50%；
-webkit变换：旋转（-50度）；
-moz变换：旋转（-50度）；
-ms变换：旋转（-50度）；
-o变换：旋转（-50度）；
变换：旋转（-50度）；
}
h1跨度{
字体：26px摩纳哥，MonoSpace；
高度：200px；
位置：绝对位置；
宽度：20px；
左：0；
排名：0；
-webkit变换原点：底部中心；
-moz变换原点：底部中心；
-ms变换原点：底部中心；
-o-变换原点：底部中心；
变换原点：底部中心；
}
.char1{
-webkit变换：旋转（6度）；
-moz变换：旋转（6度）；
-ms变换：旋转（6度）；
-o变换：旋转（6度）；
变换：旋转（6度）；
}
.char2{
-webkit变换：旋转（12度）；
-moz变换：旋转（12度）；
-ms变换：旋转（12度）；
-o变换：旋转（12度）；
变换：旋转（12度）；
}
$（函数（）{
$（“h1”）。刻字（）；
});
成立于2012年
像这样吗@KyleSevenoaks我发布了一个答案，并提到了你的小提琴，谢谢@凯尔斯文奥克斯哈哈，这不是它，凯尔。我喜欢这个大圆圈和所有的东西，但它与我的要求并不接近。无论如何，谢谢你的回复。我认为这是一个非常好的回答。我来这里寻找凯尔提供的解决方案。我认为这个问题有误导性，所以谢谢Kyle的回答。你看CSS区域了吗？是的，我也这么认为。我尽我所能避免附加标记，但似乎不可行。你证实了我的怀疑。感谢大家的响应。2015年即将结束，CSS形状仍然没有得到广泛支持。我认为，如果现在真的需要在一个圆圈内包装文本，那么他们最好的选择是。或者，你会考虑添加一些叙述来解释为什么这个代码是有效的，是什么使它成为T的答案呢？