html - parrafos - Párrafo de texto en círculo usando CSS

estilos de texto css ejemplos

Question

He estado buscando una solución decente y rápida sobre cómo colocar un párrafo de texto dentro de un círculo. Encontré que hay dos soluciones.

Solución 1

Flote múltiples div de la misma altura que el texto a la izquierda, a la derecha del texto, y cambiando el ancho de los divs, ajuste el espacio que sobra para el texto.

Solución 2

Use el generador para lo mismo, http://www.csstextwrap.com/index.php .

BONO (no es parte del problema, solo un consejo)

No estoy buscando esto, pero tal vez alguien lo necesite, y creo que es bueno tenerlo como un enlace> http://csswarp.eleqtriq.com/ Es un generador basado en web que te ayuda a envolver tu texto en el círculo. .

¿La pregunta?

¿Existe una solución más simple para poner un párrafo de texto dentro de un círculo sin tener que agregar divisores flotantes y marcado adicional? Golpear una imagen que contiene ese texto no es una solución. En el mejor de los casos, la solución tendría un marcado HTML limpio con algunos ajustes en el CSS.

Answer 1

El libro de Eric Meyer "Eric Meyer sobre CSS" habla sobre esto (Proyecto 10) y las soluciones de texto que usted encontró utilizan el mismo principio.

Usando un border-radius: 50% simple border-radius: 50% no afecta la forma del cuadro de contenido, que son rectangulares en este momento. Por ejemplo, vea la demo de Kyle Sevenoaks.

Hay un módulo CSS3 en desarrollo que aborda este problema:

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

Sin embargo, esta especificación aún está en modo borrador y no es compatible actualmente, probablemente un año o dos fuera.

La respuesta corta es no, pero es de esperar que los comentarios proporcionen alguna información.

Answer 2

La respuesta más aplicable que encontré se puede encontrar aquí:

Es más fácil usar este método y luego simplemente ocultar el texto de desbordamiento / uso que se ajusta en lugar de desbordarse.

Recorta la forma (triángulo) de div y muestra el fondo detrás

Answer 3

una orignal (?) ... cubrir!

    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)
        }
    }   

ver http://jsfiddle.net/alemarch/42o8hqb7/ http://jsfiddle.net/alemarch/42o8hqb7/1/ http://jsfiddle.net/alemarch/42o8hqb7/2/ http://jsfiddle.net/alemarch/42o8hqb7/3/

Answer 4

hola, creo que sin js creo que esto no es posible, así que use js y 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>

Answer 5

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

HAGA CLIC AQUÍ para obtener otra solución (jsfiddle).