0

I'm trying to design a text bubble, where a div will have 3 elements inside it, one image, one heading and one small paragraph, and I want the parent div to be circular. However, the text from the paragraph overflows the parent div.

enter image description here

overflow:hidden is not an option, since I don't want the text to be hidden, the text needs to be visible, but wrap to stay inside the parent on the left and right. (Note: the text is center aligned)

.content_unit {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: solid 5px cyan;
  padding: 30px;
  border-radius: 50%;
}

.content_image {
  width: 100px;
  aspect-ratio: 1/1;
  background: orange;
  border-radius: 50%;
  margin-bottom: 30px;
  border: solid 3px olivedrab;
}

.content_heading {
  font-size: 26px;
  color: black;
  margin-bottom: 20px;
}

.content_content {
  font-size: 18px;
  color: black;
}
<div class="content_container">
  <div class="content_unit">
    <div class="content_image"></div>
    <p class="content_heading">Awesome Heading</p>
    <p class="content_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie nunc enim. Integer at elementum augue. In fringilla lectus non nisl suscipit scelerisque. Duis a tellus sit amet diam semper feugiat nec</p>
  </div>
</div>

The problem I am facing is, the parent div is circular, so the bottom left and right of the text overflows out of the circle. But I need it inside.

j08691
  • 204,283
  • 31
  • 260
  • 272
Mohiuddin Hasan
  • 5
  • 2

1 Answers1

0

maybe setting max-width property on the paragraph will work out for you:

.content_content {
  font-size: 18px;
  color: black;
  max-width: 60%;
}

There's also a shape-outside property that you can play around with. If you're interested here's a great article on CSS tricks: https://css-tricks.com/using-css-to-set-text-inside-a-circle/

Sigma
  • 234
  • 2
  • 6
  • Thanks a bunch! I'll check out the article and I didn't know about shape-outside property. I'll explore it too, and see what it does. – Mohiuddin Hasan Oct 20 '22 at 14:22