Cách quấn một khối văn bản đoạn xung quanh một phần tử hình tròn bằng CSS.
Nếu bạn muốn làm cho bản trình bày nội dung của mình thú vị hơn một chút và theo kiểu tạp chí, bạn có thể sử dụng CSS để làm cho văn bản của bạn được căn chỉnh và bao bọc với các phần tử theo những cách thú vị.
Đầu tiên, hãy thêm một số nội dung HTML:
<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>
Lưu ý rằng <article> phần tử có một lớp được gọi là post và <img> phần tử có một lớp được gọi là .circle .
Bây giờ hãy 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ả sẽ như thế này:
Không tệ, phải không?
"Điều kỳ diệu" đến từ shape-outside Thuộc tính CSS được hỗ trợ trong tất cả các trình duyệt mới nhất - nhưng không được hỗ trợ trong Internet Explorer.