web-dev-qa-db-ja.com

CSSを使用したサークル内のテキストの段落

私は、テキストの段落を円の中に配置する方法について、適切で迅速な解決策を探していました。 2つの解決策があることがわかりました。

解決策1

テキストと同じ高さの複数のdivを、テキストの左と右にフロートし、divwidthテキストの余白を調整します。

解決策2

同じことのためにジェネレータを使用してください http://www.csstextwrap.com/index.php 。

ボーナス（問題の一部ではなく、単なるヒント）

私はこれを探していませんが、多分誰かがそれを必要とするかもしれません、そしてそれをリンクとして持つのは素晴らしいことだと思います> http://csswarp.eleqtriq.com/ 助けとなるウェブベースのジェネレータあなたはあなたのテキストを円に巻きつけます。

質問？

フローティングdivや追加のマークアップを追加せずに、テキストの段落を円の中に配置するためのより簡単な解決策はありますか？そのテキストを含む画像を平手打ちすることは解決策ではありません。最良のシナリオは、CSSを少し調整するだけでクリーンなHTMLマークアップになるソリューションです。

htmlcsstextgeometryparagraph
24
Nemanja

Eric Meyerの著書「Eric Meyer on CSS」では、これについて（プロジェクト10）、同じ原理を使用しているテキストラップソリューションについて説明しています。

単純なborder-radius: 50%は、現時点では長方形であるコンテンツボックスの形状には影響しません。たとえば、Kyle Sevenoaksによる demo を参照してください。

この問題に対処するCSS3モジュールが開発中です。

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

ただし、この仕様はまだドラフトモードであり、現在サポートされていません。おそらく1〜2年後です。

短い答えはノーですが、うまくいけばコメントはいくつかの洞察を提供します。

23
Marc Audet

こんにちは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>
2
Pankaj Tiwari
<!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）の場合。

1
Sandy

オリジナル（？）...カバー！

    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/

1
Alessandro Marchisio

私が見つけた最も適切な答えはここにあります：

この方法を使用して、オーバーフローを非表示にする/オーバーフローするのではなく、適合するテキストを使用する方が簡単です。

divから形状（三角形）を切り取り、背景を後ろに表示

0
Joe Corby