วิธี Wrap Text รอบ Circle ด้วย CSS

วิธี wrap paragraph text block รอบ circular element ด้วย CSS

อยากทำ content presentation ให้น่าสนใจ magazine-ish ใช้ CSS wrap text ต่อ elements อย่างน่าสนใจ

เพิ่ม 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... </p> <p> Lorem ipsum... </p> <p> Lorem ipsum... </p> <p> Lorem ipsum... </p> </article>

<article> มี class post และ <img> มี class .circle

เพิ่ม 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; }

ผลลัพธ์ควรแบบนี้:

ไม่錯หรอก!

"Magic" มาจาก CSS property shape-outside รองรับเบราว์เซอร์ใหม่ทั้งหมด — แต่ไม่รองรับ Internet Explorer