Wrap text inside a circular div

Question

I want to accomplish something like this:

I've tried creating a div and giving it a border-radius of 50%. The problem is that the text overflows the corners of the circle.

How can I accomplish this, so that the whole circle could be filled up without overflow?

Question already asked without an accepted answer: http://stackoverflow.com/questions/7057714/css3-circle-with-text-wrap — Icarus, Jan 14 '17 at 23:22
Or there http://stackoverflow.com/questions/18681361/how-to-make-a-text-inside-a-circle-div-fitting-correctly-where-div-size-is-not — Panama Prophet, Jan 14 '17 at 23:29
Did you actually copy that image from [this answer](http://stackoverflow.com/a/17716400/511529)? :-o — GolezTrol, Jan 14 '17 at 23:33
You will have to add
where needed, to adjust margins/paddings, etc... no perfect, pure CSS solution, it seems. — sinisake, Jan 14 '17 at 23:35
@GolezTrol I found the image on google images, but it must have came from that answer, haha. That answer does not have a solution anyway. — Ti Fi Shu, Jan 14 '17 at 23:37
That answer shows quite an elaborate explanation of the limitations of the CSS proposal and the alternatives using SVG and canvas. If it doesn't work for you, please ask a new question which describes why the given answer doesn't work for you. — GolezTrol, Jan 14 '17 at 23:42
@sinisake I too can guess what issues there might be, but it's up to OP to specify which requirements they have. — GolezTrol, Jan 16 '17 at 09:31

score -1 · Answer 1 · answered Jan 14 '17 at 23:30

-1

What about this?

div {
    border: 1px solid #cceeff;
    -webkit-border-radius: 50px;
    padding: 15px;
    height: 70px;
    width: 70px;
    overflow: hidden;
}

<div>HALLO MAN, WANNA IT?</div>

answered Jan 14 '17 at 23:30

Teshtek

This will hide the overflow text, I want it to break down to the next line. – Ti Fi Shu Jan 14 '17 at 23:32

1 Answers1