Абзац текста в круге с использованием CSS

Я искал достойное и быстрое решение о том, как разместить абзац текста внутри круга. Я обнаружил, что есть два решения.

Решение 1

Смещайте несколько div той же высоты, что и текст, слева и справа от текста, и, изменяя width div, вы регулируете пространство, оставшееся для текста .

Решение 2

Используйте генератор для того же, http://www.csstextwrap.com/index.php.

БОНУС (не часть проблемы, просто чаевые)

Я не ищу это, но, возможно, это кому-то может понадобиться, и я думаю, что было бы неплохо иметь это как ссылку > http://csswarp.eleqtriq.com/ Это веб-генератор, который поможет вам обернуть текст вокруг круга.

Вопрос?

Есть ли более простое решение для размещения абзаца текста внутри круга без добавления плавающих элементов div и дополнительной разметки. Пощечина изображения, содержащего этот текст, не является решением. В лучшем случае решение будет иметь чистую HTML-разметку с небольшими изменениями в CSS.


text html css paragraph geometry
person Nemanja    schedule 07.06.2013    source источник
comment
Так? jsfiddle.net/Kyle_Sevenoaks/Q9k6v   -  person Kyle    schedule 07.06.2013
comment
@KyleSevenoaks Я опубликовал ответ и сослался на вашу скрипку, спасибо!   -  person Marc Audet    schedule 07.06.2013
comment
@KyleSevenoaks LOL, это не Кайл. Я люблю большой круг и все такое, но это далеко не то, о чем я просил. Спасибо за ответ в любом случае.   -  person Nemanja    schedule 07.06.2013
comment
Я думаю, что это фантастический ответ. Я пришел сюда в поисках решения, которое предоставил Кайл. Я думаю, что вопрос ввел в заблуждение, поэтому спасибо, Кайл, за ответ.   -  person MichaelMcCabe    schedule 22.01.2014
comment
@MichaelMcCabe Я не согласен, Майкл, это то, за что я сейчас предложил награду просто потому, что это меня сильно раздражает. Это решение было чем-то, что любой мог понять и ответить, и да, вопрос расплывчатый, но я почти уверен, что 90% людей, просматривающих это, знали, что на самом деле имелось в виду.   -  person Joe Corby    schedule 12.12.2014
comment
Вы смотрели на регионы CSS?   -  person    schedule 13.12.2014
comment
Регионы CSS, по-видимому, являются одним из немногих способов сделать это. Наряду с формами polyfill.   -  person Joe Corby    schedule 16.12.2014

Ответы (5)


arrow_upward
23
arrow_downward

Об этом рассказывается в книге Эрика Мейера «Эрик Мейер о CSS» (Проект 10), и решения для переноса текста, которые вы нашли, используют тот же принцип.

Использование простого border-radius: 50% не влияет на форму блока содержимого, которая в настоящее время имеет прямоугольную форму. Например, см. демонстрацию Кайла Севеноукса.

В разработке находится модуль CSS3, решающий эту проблему:

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

Однако эта спецификация все еще находится в черновом режиме и в настоящее время не поддерживается, вероятно, через год или два.

Короткий ответ — нет, но, надеюсь, комментарии дадут некоторое представление.

person Marc Audet    schedule 07.06.2013
comment
Да, я так и думал. Я пробовал все, что мог, чтобы избежать дополнительной разметки, но казалось, что это невозможно. Вы подтвердили мои сомнения. Спасибо и спасибо всем за ответы. - person Nemanja; 07.06.2013
comment
2015 год почти закончился, а CSS Shapes по-прежнему широко не поддерживается. Я думаю, что на данный момент, если вам действительно нужно обернуть текст внутри круга, то лучшими вариантами являются SVG + D3plus или Canvas/SVG + ванильный JS. - person thdoan; 16.11.2015

arrow_upward
2
arrow_downward

привет, я думаю, что без 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>
person Pankaj Tiwari    schedule 13.12.2014
comment
Я надеялся, что это возможно без JS, но начинает казаться, что это не тот случай, когда возвращается поддержка Circle-Inside. - person Joe Corby; 16.12.2014

arrow_upward
1
arrow_downward 

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

person Sandy    schedule 07.06.2013
comment
Не могли бы вы добавить немного повествования, чтобы объяснить, почему этот код работает и что делает его ответом на вопрос? Это было бы очень полезно для человека, задающего вопрос, и для всех, кто придет. - person Andrew Barber; 07.06.2013
comment
Рисование текста по дуге — это не то же самое, что обтекание текста кругом. - person thdoan; 16.11.2015

arrow_upward
1
arrow_downward

оригинальный (?) ... кавер!

    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/

person Alessandro Marchisio    schedule 12.12.2014
comment
Достаточно честно, причудливый круглый текст выглядит хорошо и хорошо, но это не текст, расположенный нормально, а завернутый в круг. Извините, если я был слишком расплывчатым - person Joe Corby; 16.12.2014

arrow_upward
0
arrow_downward

Наиболее подходящий ответ, который я нашел, можно найти здесь:

Проще использовать этот метод, а затем просто скрыть переполнение / использовать текст, который подходит, а не переполняется.

Вырежьте фигуру (треугольник) из div и покажите фон позади

person Joe Corby    schedule 17.12.2014