Cách wrap khối text paragraph quanh element tròn với CSS.
Nếu bạn muốn trình bày nội dung thú vị hơn, phong cách tạp chí, bạn có thể dùng CSS làm text align và wrap quanh element theo cách thú vị.
Trước hết thêm 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="Một quả cầu địa lý" /> <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>Chú ý element <article> có class post và element <img> có class .circle.
Bây giờ thêm CSS sau:
.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; }Kết quả nên trông như sau:
Khá tuyệt, phải không?
"Phép màu" đến từ CSS property shape-outside được hỗ trợ trên tất cả trình duyệt mới — nhưng không trên Internet Explorer.