Bagaimana untuk Membuat Aliran Teks Sekitar Div Bulat?

Meningkatkan Peletakan Teks dalam Div Bulat

Mencipta div bulat yang memuatkan teks dengan lancar boleh dicapai menggunakan teknik CSS. Walau bagaimanapun, secara lalai, div bulat sering memaparkan teks dalam format kuasa dua.

Situasi Semasa:

Seperti yang ditunjukkan dalam JSFiddle yang disediakan (http://jsfiddle.net /kUJq8/), CSS berikut menghasilkan div bulat dengan kuasa dua teks:

div {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: #333;
    color: #FFF;
}

Penyelesaian 1: Bentuk Luar

Pelayar moden menyokong sifat bentuk luar, menawarkan penyelesaian langsung untuk membungkus teks di sekeliling bentuk yang kompleks. Untuk bentuk bulat, sintaksnya ialah:

div {
    width: 320px;
    height: 320px;
    shape-outside: circle(50%);
    background: #333;
    color: #FFF;
}

Nota: Sokongan penyemak imbas untuk bentuk luar perlu dipertimbangkan.

Penyelesaian 2: Pseudo Kecerunan Elemen

Kaedah alternatif melibatkan penggunaan imej atau kecerunan untuk mentakrifkan bentuk bulat. Dengan pendekatan yang terakhir, empat elemen pseudo digunakan:

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

div[class]:before {
  /* ... */
}

div[class][id]:before {
  /* ... */
}

div[class]:after {
  /* ... */
}

div[class][id]:after {
  /* ... */
}

Dengan menggunakan kecerunan jejari yang diletakkan dengan teliti, elemen pseudo ini secara berkesan mencipta ilusi bentuk bulat. Apabila digabungkan dengan penjuru bulat div utama, teks membungkus bulatan seperti yang dikehendaki.

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