Untuk membalut teks perenggan di sekeliling imej yang menjulur melepasi tepi kad, apungkan imej dan gunakan margin luar negatif. Tambahkan shape-outside untuk kontur melengkung. Tutorial ini membina contoh setempat lengkap yang boleh anda buka dalam Safari pada Mac anda.

Apakah yang menyebabkan teks membalut di sekeliling imej yang bertindih?

Imej perlu mengambil bahagian dalam susun atur apungan perenggan. CSS float meletakkan elemen pada satu sisi bekasnya dan membolehkan teks bersebelahan membalut di sisinya. Dalam contoh ini, apungan ke kanan membiarkan teks mengalir di sebelah kirinya dan kemudian di bawahnya. MDN: float.

Tiga pilihan mengawal hasilnya: apungan mewujudkan tingkah laku pembalutan, margin kanan negatif membolehkan imej menjulur melepasi bekas, dan shape-outside mentakrifkan kontur yang diikuti oleh teks berdekatan. Apungan biasa menghasilkan pembalutan segi empat tepat; bentuk boleh membuat setiap baris mengikuti bulatan. MDN: shape-outside.

Mengalihkan imej secara visual tidak mencukupi. Imej yang diposisikan secara mutlak tidak mengambil ruang dalam aliran biasa, jadi elemen sekeliling berkelakuan seolah-olah imej itu tiada. Translasi mengubah kedudukan yang dipaparkan tanpa menyusun semula aliran dokumen biasa. Tingkah laku ini menjelaskan sebab imej bertindih boleh menutupi teks apabila diposisikan dengan position: absolute atau transform: translateX(...). MDN: position, MDN: Using CSS transforms.

Tugas di sini sengaja khusus: satu imej bulat melintasi tepi kanan satu kad teks, dan perenggan kad itu mengikuti kontur kiri bulatan. Imej dan perenggan berada dalam rantau pembalutan yang sama.

Bina contoh lengkap pada Mac anda

Dalam editor kod teks biasa, cipta fail bernama overlap-wrap.html. Tampal dokumen lengkap di bawah, simpan dan buka dalam Safari. Contoh ini menyertakan imej SVG abstraknya sendiri sebagai URL data, jadi tiada fail imej, pakej atau alat binaan yang perlu dipasang.

Imej terapung muncul sebelum perenggan yang sepatutnya dipengaruhinya. Kedudukan ini penting kerana kedudukan apungan dihadkan oleh kandungan yang muncul lebih awal dalam dokumen. Mengekalkan tajuk sebelum apungan juga membolehkan tajuk menggunakan keseluruhan lebar teks kad. W3C: Visual formatting model.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Overlapping image and paragraph wrapping</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 32px 96px 32px 32px;
      background: #eef1f5;
      color: #243247;
      font: 18px/1.65 system-ui, sans-serif;
    }
    .card {
      display: flow-root;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
      padding: 24px;
      background: white;
      box-shadow: 0 0 0 1px #cbd3df;
      overflow: visible;
    }
    .card h2 {
      margin: 0 0 16px;
      font-size: 26px;
      line-height: 1.25;
    }
    .card p { margin: 0 0 16px; }
    .card p:last-child { margin-bottom: 0; }
    .art {
      display: block;
      float: right;
      width: 240px;
      height: 240px;
      margin: 0 -88px 16px 16px;
      border-radius: 50%;
      shape-outside: circle(50%) border-box;
      shape-margin: 16px;
    }
    @media (max-width: 760px) {
      body { padding: 16px; }
      .art {
        float: none;
        width: min(240px, 100%);
        height: auto;
        margin: 0 auto 24px;
        shape-outside: none;
      }
    }
  </style>
</head>
<body>
  <article class="card">
    <h2>Study A: circles and spacing</h2>
    <img class="art" width="240" height="240" alt=""
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Crect width='240' height='240' fill='%233a628b'/%3E%3Ccircle cx='90' cy='85' r='60' fill='%23b9d8eb'/%3E%3Ccircle cx='165' cy='170' r='45' fill='%238db5cc'/%3E%3C/svg%3E">
    <p>Panel A pairs a circular graphic with a continuous passage of
      sample text. Follow the right edge of this paragraph as each
      line approaches the curved outline. Near the widest part of
      the circle, the available space becomes narrower.</p>
    <p>Panel B continues the same passage with a second paragraph.
      The graphic extends into the outer gutter while the words
      remain inside the white card. As the contour curves inward,
      later lines can use more of the available width.</p>
    <p>Panel C provides enough additional text to show the transition
      below the graphic. Once the passage continues beyond the
      wrapping region, its lines return to the full content width.
      Resize the window to compare the desktop arrangement with
      the stacked layout used in a narrower window.</p>
  </article>
</body>
</html>

Pada ruang pandang yang lebih lebar daripada 760px, hasil yang dimaksudkan ialah grafik bulat yang menjulur ke ruang tepi, dengan baris perenggan mengikuti sisinya yang kiri. Pada 760px atau kurang, imej menjadi blok berpusat di atas perenggan. Titik henti ini ialah pilihan reka bentuk ilustratif; @media menggunakan deklarasi yang disertakan apabila pertanyaannya sepadan. MDN: @media.

Grafik contoh ini bersifat hiasan, jadi elemen imejnya menggunakan alt="". Jika anda menggantikannya dengan grafik yang menyampaikan maklumat, berikan alternatif teks yang sesuai. WHATWG membezakan imej hiasan daripada imej yang maklumatnya memerlukan padanan dalam bentuk teks. WHATWG: Requirements for providing text to act as an alternative for images.

Bagaimanakah anda memilih tindihan dan jarak teks?

Mulakan dengan kedudukan imej, kemudian laraskan konturnya. Apungan ke kanan diletakkan menggunakan kotak marginnya. Dalam contoh ini, margin kanan negatif meletakkan tepi kanan imej 88px melepasi tepi kandungan kad. Kad mempunyai padding kanan 24px, menjadikan bahagian yang menjulur melepasi latar putihnya sebanyak 64px. Ini ialah ukuran terbitan untuk contoh ini, dalam piksel CSS. W3C: Positioning the float.

Kuantiti Nilai contoh Pengiraan atau tujuan
Lebar imej 240px Diameter bulatan yang dipaparkan
Anjakan ke luar dari tepi kandungan 88px Magnitud margin kanan negatif
Padding kad 24px Ruang antara tepi kandungan dengan tepi latar
Bahagian yang kelihatan menjulur melepasi latar 64px 88 − 24
Lebar imej yang kekal di dalam kawasan kandungan 152px 240 − 88
Ruang simpanan sandaran segi empat tepat 168px 240 − 88 + 16 termasuk margin kiri

Untuk susun atur anda sendiri, kira magnitud margin negatif sebagai bahagian yang diingini menjulur ditambah padding kanan bekas. Contohnya, bahagian yang menjulur 40px dengan padding 24px memerlukan margin kanan -64px. Semak semula lebar teks yang tinggal setiap kali anda membesarkan imej atau mengurangkan lebar bekas.

Versi bulat menggunakan shape-outside: circle(50%) border-box supaya geometrinya mengikuti kotak imej segi empat sama. Memilih border-box secara jelas berguna di sini kerana margin tidak simetri mengubah kotak margin. Tanpa kotak rujukan yang dinyatakan secara jelas, bentuk asas menggunakan margin-box secara lalai. MDN: Basic shapes with shape-outside.

shape-margin: 16px menambah ruang di sekeliling kontur pembalutan. Margin kiri positif menyediakan ruang untuk jarak itu pada sisi yang menghadap teks. Bentuk, termasuk margin bentuknya, dipangkas mengikut kotak margin apungan; meningkatkan shape-margin sahaja tidak dapat memanjangkan kawasan pembalutan tanpa had. Margin kanan negatif juga memangkas bentuk pada sisi yang menghala ke luar, tempat contoh ini tiada teks perenggan. W3C: CSS Shapes Module Level 1.

Untuk imej segi empat tepat, tukar border-radius kepada 0, shape-outside kepada none, dan shape-margin kepada 0. Kekalkan apungan dan margin. Ini menghasilkan pembalutan dengan sisi lurus serta kedudukan ke luar yang sama. Jika anda hanya membuang bentuk sambil mengekalkan pemangkasan bulat, anda akan mendapat gambar bulat dengan ruang teks segi empat tepat.

Sempadan bekas manakah yang mempengaruhi pembalutan?

Kad menggunakan display: flow-root untuk mewujudkan konteks pemformatan blok yang mengandungi apungannya secara menegak. Ini membolehkan ketinggian kad mengambil kira imej walaupun teksnya pendek. Ia juga memastikan rantau pembalutan ini tidak bergantung pada apungan luaran. MDN: Block formatting context.

Kekalkan perenggan dalam aliran blok biasa di dalam rantau itu. Jika imej ialah item flex atau grid secara langsung, apungannya tidak akan menghasilkan susunan pembalutan perenggan ini. Begitu juga, memberikan pembungkus perenggan yang berasingan konteks pemformatan blok tersendiri akan mengecualikan apungan luaran daripada kandungan pembungkus itu. Grid luaran boleh meletakkan keseluruhan kad; bahagian dalam kad masih boleh menggunakan susun atur aliran. MDN: Block formatting context.

Periksa pemangkasan secara berasingan. Contoh ini membiarkan limpahan kelihatan supaya bahagian yang menjulur dapat dipaparkan. Menggunakan limpahan untuk mengandungi apungan boleh menyebabkan pemangkasan atau bar skrol; flow-root mengandungi apungan tanpa memerlukan pilihan itu. Periksa juga komponen pembungkus jika imej hilang tepat pada tepi leluhur. MDN: Containing internal floats.

CSS Shapes juga mempunyai sempadan arah: apungan ke kanan membolehkan pembalutan di sebelah kirinya, manakala apungan ke kiri membolehkan pembalutan di sebelah kanannya. Satu apungan tidak dapat mewujudkan laluan teks pada kedua-dua sisi imej berpusat. Untuk tugas ini, susunan yang disokong ialah apungan di tepi. W3C: CSS Shapes and float behavior.

Bolehkah anda menggunakan pendekatan ini dengan Tailwind CSS?

Ya. Dalam projek Tailwind sedia ada, float-right menghasilkan float: right, manakala float-none membuang apungan. Tailwind menyediakan utiliti ini; pelayar masih mengendalikan susun atur teks. Tailwind CSS: float.

Untuk deklarasi kontur, sintaks sifat arbitrari Tailwind boleh menyatakan [shape-outside:circle(50%)_border-box] dan [shape-margin:16px]. Garis bawah mewakili ruang sebelum border-box. Ini ialah cebisan nama kelas untuk projek Tailwind yang telah dikonfigurasi, bukan pengganti bagi dokumen lengkap di atas. Kekalkan dimensi, margin, susun atur bekas dan tetapan semula untuk tetingkap sempit yang sama apabila anda menyesuaikannya. Tailwind CSS: Adding custom styles.

Bagaimanakah anda mendiagnosis pembalutan yang kelihatan salah?

Gunakan contoh setempat sebagai garis dasar, kemudian masukkan gaya sedia ada anda satu perubahan pada satu masa. Turutan ini menyemak syarat yang menentukan susun atur:

  1. Sahkan pembalutan segi empat tepat dahulu. Tetapkan shape-outside: none buat sementara waktu. Jika teks masih mengalir di bawah gambar, periksa sama ada imej terapung, diposisikan secara mutlak atau merupakan item flex/grid secara langsung.
  2. Semak susunan dokumen. Letakkan apungan sebelum perenggan yang sepatutnya membalut di sekelilingnya.
  3. Semak rantau pembalutan. Kekalkan apungan dan kandungan perenggan dalam konteks pemformatan blok yang sama; buang konteks berasingan yang tidak diperlukan daripada pembungkus perenggan.
  4. Semak kontur. Pulihkan bulatan dan rujukan border-box yang dinyatakan secara jelas. Pastikan imej yang dipaparkan berbentuk segi empat sama sebelum menggunakan pemangkasan bulat.
  5. Semak ruang tepi. Lebarkan ruang pandang dan cari pemangkasan pada kad atau leluhurnya. Pastikan halaman menyediakan ruang luar yang mencukupi untuk bahagian yang menjulur.
  6. Semak susun atur sempit. Ubah saiz melintasi titik henti contoh dan pastikan apungan serta margin negatif ditetapkan semula.

Semakan ini mengikuti peraturan yang didokumenkan untuk kedudukan apungan, konteks pemformatan dan kotak rujukan bentuk. Elakkan menambah pemisah baris manual untuk membaiki baris tertentu; tindakan itu akan mengikat petikan kepada satu saiz tetingkap tertentu.

MDN menyatakan bahawa shape-outside tersedia secara meluas, sambil menjelaskan bahawa sokongan mungkin berbeza bagi sebahagian sintaksnya. Contoh ini menggunakan bentuk circle() yang didokumenkan. Bandingkan halaman ini dalam pelayar Mac yang ingin anda sokong, dan nilai ruang kelegaan serta kebolehbacaan tanpa mensyaratkan hujung baris yang serupa. Jika deklarasi bentuk tidak tersedia, apungan akan mengekalkan pembalutan segi empat tepat. MDN: shape-outside.

Untuk susun atur akhir, pilih saiz imej dan bahagian yang menjulur secara bersama, kekalkan lebar yang mencukupi untuk petikan dan pastikan sandaran bertindan. Setelah dimensi itu berfungsi, gunakan kontur untuk memperhalus jarak di sekeliling imej. Ini membolehkan perenggan disusun semula apabila teks atau lebarnya yang tersedia berubah.

Sumber