使用CSS的圆形文本段落[重复]答案

【问题标题】：Paragraph of text in circle using CSS [duplicate]使用CSS的圆形文本段落[重复]
【发布时间】：2013-06-03 16:03:07
【问题描述】：

我一直在寻找一个关于如何将一段文本放在一个圆圈内的体面和快速的解决方案。我发现有两种解决方案。

解决方案 1

将多个与文本高度相同的 div 浮动到文本的左侧和右侧，并通过更改 div width 来调整剩余的空间为文本。

解决方案 2

将生成器用于同样的事情，http://www.csstextwrap.com/index.php。

奖金（不是问题的一部分，只是提示）

我不是在寻找这个，但也许有人可能需要它，我认为将它作为链接很好> http://csswarp.eleqtriq.com/ 它是一个基于网络的生成器，可以帮助您将文本环绕在圆圈周围。

问题？

有没有更简单的解决方案可以将一段文本放在一个圆圈内，而无需添加浮动 div 和其他标记。拍打包含该文本的图像不是解决方案。最好的情况是，该解决方案将具有干净的 HTML 标记，只需对 CSS 进行少量调整。

【问题讨论】：

喜欢这个？ jsfiddle.net/Kyle_Sevenoaks/Q9k6v
@KyleSevenoaks 我发布了一个答案并提到了你的小提琴，谢谢！
@KyleSevenoaks 哈哈，这不是凯尔。我喜欢大圆圈和一切，但它与我所要求的相差甚远。无论如何感谢您的回复。
我认为这是一个很棒的答案。我来这里是为了寻找 Kyle 提供的解决方案。我认为这个问题具有误导性，所以谢谢凯尔的回答
你看过 CSS 区域吗？

标签： html css text geometry paragraph

【解决方案1】：

Eric Meyer 的书“Eric Meyer on CSS”讨论了这一点（项目 10）以及您发现的文本换行解决方案使用相同的原理。

使用简单的border-radius: 50%不会影响内容框的形状，此时内容框为矩形。例如，请参阅 Kyle Sevenoaks 的 demo。

有一个解决这个问题的 CSS3 模块正在开发中：

http://dev.w3.org/csswg/css-shapes

但是，此规范仍处于草稿模式，目前尚不支持，可能需要一两年时间。

简短的回答是否定的，但希望 cmets 能提供一些见解。

【讨论】：

是的，我也是这么想的。我尽我所能避免额外的标记，但似乎这是不可行的。你证实了我的怀疑。谢谢大家的回复。
2015 年快结束了，CSS 形状仍未得到广泛支持。我认为现在如果真的需要将文本包裹在一个圆圈内，那么他们最好的选择是SVG + D3plus 或Canvas/SVG + vanilla JS。

【解决方案2】：

嗨，我认为没有 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>

【讨论】：

我希望没有 JS 也是可能的，但如果没有对 circle-inside 的支持，它开始看起来并非如此。

【解决方案3】：

<!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>

CLICK HERE 用于另一种解决方案（jsfiddle）。

【讨论】：

您是否会考虑添加一些叙述来解释此代码为何有效，以及是什么使它成为问题的答案？这对提出问题的人以及其他任何出现的人都非常有帮助。
沿弧线绘制文本与将文本环绕在圆圈内不同。

【解决方案4】：

原件 (?)...封面！

    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/

【讨论】：

很公平，花哨的圆形文本看起来不错，但它不是正常定位的文本，而是包裹在一个圆圈内。对不起，如果我太含糊了

【解决方案5】：

我找到的最适用的答案可以在这里找到：

使用此方法更容易，然后只需隐藏溢出/使用适合而不是溢出的文本。

Cut out shape (triangle) from div and show background behind

【讨论】：