How to wrap a paragraph text block around a circular element with CSS.
If you want to make your content presentation a bit more interesting, and magazine-ish, you can use CSS to make your text align and wrap against elements in interesting ways.
First let’s add some HTML content:
<article class="post">
<img
class="circle"
src="https://www.fwz-elektrotechnik.de/wp-content/uploads/2014/11/Globus-Wikipedia-Kopie-1.png"
alt="A globus"
/>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
praesentium aliquid quam ut sint explicabo praesentium aliquid quam ut sint
voluptas omnis, quis, est vitae?
</p>
</article>Notice that the <article> element has a class called post and the <img> element has a class called .circle.
Now add the following CSS:
.post {
max-width: 800px;
margin: 3rem auto;
}
.circle {
float: right;
height: 30vw;
margin-left: 1rem;
margin-left: calc(1rem + 2vw);
object-fit: cover;
shape-outside: circle(50%);
width: 30vw;
}The result should look like this:
Not bad, huh?
The “magic” comes from the shape-outside CSS property which is supported in all the newest browsers — but not in Internet Explorer.
