Force text to respect the boundaries inside of a circle

Gemma Weirs -

While it's not quite perfect you can use this get most of the way there

figcaption { 
  text-align: center;  
  overflow-wrap: break-word;
}

http://codepen.io/jamesbarnett/pen/wcdKs

Though I don't have an idea that will allow the text to properly flow within the circle itself, I was able to get the text to sit pretty well within the circle. It's not exactly your idea, but center aligning the text and adding some padding did the trick for this: http://codepen.io/Aydreean/full/roshi

If nobody else comes up with anything better, I imagine you could manipulate the lines with line breaks, center aligning each line after you individually determine the length each line needs to me.

I think you can use overflow props and box-sizing + text aligne center + increas a little padding, and h&w and off course with adding box-sizing like that

background-color: rgba(0,0,0,.7); padding: 1.5rem; width: 300px; height: 300px; border-radius: 50%; position: absolute; top: .5rem; left: .5rem; opacity: 0; transition: opacity 1s ease; font-size: .8rem; text-align: center; box-sizing: border-box; overflow-wrap: break-word;

But i don't realy know how that will be working for texts with shorter or longer length and with bigger or smaller circles.

you can use "Arctext.js" a jQuery plugin that let’s you do exactly that. you can find all the details and even demos in this link : http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/

Thanks guys. I knew something similar could be done with paddings/margins/overflow/aligning/etc but I was hoping there was a new module or something that could achieve what I'm after more easily. Pity really.

Thanks for the heads-up shervin but that's not what I was after. Cool demo though.

Found somthing else... I'm not sure but... may be it will be useful

csstextwrap