HTML Text wrap round box

Question

I want to create a circle on an HTML page with text in it. Something similar to this: https://jsfiddle.net/f5vctpth/1/

I now used the img-round class from bootstrap to do it, but it is not dynamic...

<div class="img-circle">

Is there a way to dynamically wrap the text in the div?

I found this: (but havent yet found a way to make it work.)

http://webplatform.adobe.com/Demo-for-Alice-s-Adventures-in-Wonderland/

possible duplicate of [Text within circle div. Div size adjusted to content](http://stackoverflow.com/questions/19169806/text-within-circle-div-div-size-adjusted-to-content) — pschueller, Apr 04 '15 at 15:32

score 1 · Answer 1 · answered Apr 04 '15 at 15:27

try this fiddle https://jsfiddle.net/f5vctpth/2/

add this to your div overflow: hidden; it will work

           <div class="img-circle" style="
                width: 500px;
                height: 500px;
                background: #333;
                color: red;
                text-align: center;
            ">

in above style you missed overflow: hidden; add this to your style overflow: hidden;

replace with this code it will work

           <div class="img-circle" style="
                width: 500px;
                height: 500px;
                background: #333;
                color: red;
                text-align: center;
                overflow: hidden;
            ">

HTML Text wrap round box

1 Answers1