CSS: wrapping around text inside a drawn circle using CSS

Question

I am using this CSS code to draw circles:

circle {
    background: #f00;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 100px;
    margin:5px;
}

Using this in html I can draw 3 circles side-by-side with text inside them:

 <circle>Text1</circle>
 <circle>Text2</circle>
 <circle>Text3</circle>

which looks like this:

Now if I want to add more text in side the middle circle this is what happens:

<circle>Text1</circle>
<circle>Text2 and more</circle>
<circle>Text3</circle>

whoever, I want 'Text2 and more` to stay inside the second circle and just wraps around. How can I achieve that?

NOTE: I don't want to use display: table-cell as it doesn't work nicely on responsive sites and does not let circles wrap around and stay on top of each other if the view page is very narrow.

Answer 1

The line-height is causing this. I've adjusted your CSS.

circle span {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
}
circle {
  background: #f00;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  margin: 5px;
  position: relative;
}

<circle><span>Text 1</span></circle>
<circle><span>Text 2 and more</span></circle>
<circle><span>Text 3</span></circle>