Bagaimana untuk Membungkus Teks Di Sekitar Div Bulat Menggunakan CSS?

Cara Menyimpan Teks Di Dalam Div Bulat Menggunakan CSS

Membungkus teks di sekeliling div bulat boleh menjadi rumit, selalunya menghasilkan teks petak kuasa dua . Isu ini boleh diselesaikan menggunakan pelbagai teknik:

Shape-Outside Property

Shape-outside ialah sifat CSS moden yang mentakrifkan bentuk untuk kandungan sebaris untuk dililitkan. Dengan menyesuaikan bentuk ini, anda boleh membuat tepi bulat untuk teks anda. Walau bagaimanapun, sokongan penyemak imbas untuk bentuk luar adalah terhad.

Kecerunan Latar Belakang

Pendekatan lain ialah menggunakan latar belakang kecerunan jejari untuk mencipta bentuk bulat. Untuk mencapai matlamat ini, gunakan kecerunan jejari dengan ketelusan di luar bulatan yang dikehendaki, membolehkan teks mengalir dengan bebas di dalamnya. Teknik ini memerlukan empat pseudo-elemen untuk membentuk bentuk.

Pseudo-Element Solution

Sama seperti kaedah kecerunan latar belakang, teknik ini menggunakan pseudo-elemen untuk mencipta bulatan menggunakan kecerunan jejari. Walau bagaimanapun, daripada menggunakan ketelusan, kecerunan dilukis di luar perimeter bulatan, dengan berkesan menolak teks dari tepi.

Pelaksanaan

div:not([class]) {
    width: 10em;
    height: 10em;
    border-radius: 50%;
    background: #333;
}

div[class]:before {
    content: '';
    float: left;
    clear: left;
    height: 5em;
    width: 5em;
    background: radial-gradient( circle at bottom right, transparent 69%, red 69%);
}

/* ... Remaining pseudo-element styles and additional styling */

Nota: Sokongan penyemak imbas untuk bentuk luar adalah penting untuk menggunakan teknik itu.

Atas ialah kandungan terperinci Bagaimana untuk Membungkus Teks Di Sekitar Div Bulat Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!