How to set the form to text using css

If just some text in the area bounded by a circle, then specify the dimensions of the block, rounding and overflow: hidden. word-break: break-all; will create the illusion of wrapping and not rough cutting of a piece of text. And change the font size as needed. Font wrap around will not, it will just be cut along the border. In order for the lines to retain readability, you need to wrap at the points of contact with the border if the rounding is on the right edge (for writing from left to right). But there is no transfer to the left, therefore the text will be cut there. In general, it can be concluded that it would be good if all the changes related to the placement of the test (alignment, hyphenation) were carried out in a region bounded by a circle, otherwise we will have to either calculate the line width, play with indents, because the border will simply cut the text , but does not specify the size of the text block, relative to which hyphens work, etc.

Here is a service that does what you obviously need, and a splint on its use:

http://www.csstextwrap.com/index.php

http://www.youtube.com/watch?v=Tf1xWZQNCFQ

The way in which they act there (there is also an option with JS, but now we understand that pure CSS is interesting) is really associated with changes in the width of the lines like a ladder. Generate the code and see for yourself.

Maybe what's wrong, I will be grateful for the criticism.

In the future, this will be done by native CSS.

In the meantime, you can do this: many div , half float: left , half float:right . And the widths are selected. First a wide div , then already, and so on until the middle, and then back. Something like this (the bars are invisible divs with float: left ):

 —————————————— А ————————— вот вот вот вот ———— тут тут тут тут тут тут тут —— текст текст текст текст текст ———— произвольной произвольной ————————— формы формы —————————————— ! ! ! 

Well, almost a circle))

To be honest, I hardly understood the question, but I can offer such a solution. For a text block, make a large border-radius so that the block is round and the text is set text-align: justify; Maybe so?

 div.textblock { text-align: justify; border-radius: 50px; }