Untuk mengekalkan ruang pada kedua-dua hujung setiap baris serlahan yang terbungkus, gunakan box-decoration-break: clone pada elemen sebaris, bersama latar belakang dan ruang dalamnya. Sertakan pengisytiharan berawalan WebKit untuk Safari. MDN menerangkan hiasan serpihan.

Panduan ini ditujukan kepada seseorang yang mengedit halaman web pada Mac dan mahu frasa yang diserlahkan terbungkus secara semula jadi dalam tajuk atau perenggan. Tugasnya adalah memberikan latar belakang berjarak dalam pada setiap baris yang terhasil sambil membiarkan pelayar mengendalikan pemenggalan baris.

Mengapa ruang dalam hilang apabila serlahan terbungkus?

Nilai awal box-decoration-break ialah slice. Apabila kotak sebaris terpecah merentasi baris, nilai itu menganggap hiasannya sebagai kotak berterusan yang dipotong menjadi beberapa serpihan. Ruang dalam tidak ditambah pada tepi yang terputus. Dengan clone, setiap serpihan menerima ruang dalam, sempadan dan hiasan latarnya sendiri. W3C mentakrifkan kedua-dua tingkah laku pemecahan.

Perbezaan itu menerangkan hasil yang lazim: menambah lebih banyak ruang dalam mendatar menjadikan permulaan dan penghujung keseluruhan frasa lebih lapang, tetapi tepi baris di tengah masih kelihatan rapat. Tetapan yang tiada mengawal perkara yang berlaku pada pemenggalan itu; menambah ruang dalam sahaja tidak mengubahnya.

Kekalkan serlahan sebagai kotak sebaris. Latar belakang blok menghiasi segi empat tepat yang mengandungi teks, manakala serlahan sebaris mengikuti aliran teks. MDN mendokumentasikan tingkah laku saiz dan jarak yang berbeza bagi kotak blok, sebaris dan blok sebaris. Lihat panduan model kotak MDN.

Cipta contoh lengkap pada Mac anda

Dalam penyunting kod, cipta fail teks biasa bernama wrapped-highlight.html, tampal contoh lengkap di bawah, kemudian simpannya. Buka fail itu dalam pelayar desktop anda. Pemasangan pakej, helaian gaya luaran atau JavaScript tidak diperlukan.

Tajuk sintetik ini mewakili pengenalan halaman ringkas. Satu span mengelilingi keseluruhan frasa yang dihias. WHATWG mentakrifkan elemen span sebagai bekas aras teks umum yang tidak mempunyai makna tersendiri, menjadikannya sesuai untuk pengelompokan visual semata-mata ini. Baca takrif span dalam Standard HTML.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Wrapped highlight example</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 2rem;
      background: #ffffff;
      color: #202020;
      font-family: system-ui, sans-serif;
    }

    .sample {
      max-width: 26rem;
      margin: 0 auto;
    }

    .sample-title {
      margin: 0;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.65;
    }

    .highlight {
      display: inline;
      background-color: #ffe6a6;
      padding: 0.08em 0.3em;
      border-radius: 0.15em;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
  </style>
</head>
<body>
  <main class="sample">
    <h1 class="sample-title"><span class="highlight">Amber tiles and silver circles arranged across a sample page</span></h1>
  </main>
</body>
</html>

Kecilkan tetingkap pelayar sehingga tajuk terbungkus, kemudian besarkannya semula. Periksa permulaan dan penghujung setiap baris yang diserlahkan. Hasil yang diingini ialah serpihan latar belakang berjarak dalam yang berasingan di sekeliling setiap baris, dengan gaya yang sama dikekalkan apabila pembungkusan berubah. Contoh MDN menggunakan pasangan pengisytiharan berawalan dan standard yang sama. Lihat sintaks dan contoh yang didokumenkan.

Dimensi di sini hanyalah pilihan reka bentuk sebagai ilustrasi. Mulakan dengan mengubah ruang dalam mendatar, 0.3em, jika hujungnya kelihatan terlalu rapat atau terlalu lebar. Ubah ruang dalam menegak, 0.08em, secara berasingan. Kekalkan ujian pembungkusan semasa melaraskan mana-mana nilai.

Untuk membandingkan tingkah laku, ubah sementara kedua-dua pengisytiharan hiasan daripada clone kepada slice, simpan dan muat semula. Selepas itu, pulihkan kedua-duanya kepada clone. Mengubah kedua-duanya mengelakkan perbandingan bergantung pada pengisytiharan yang dikenali oleh pelayar anda.

Butiran sokongan pelayar manakah yang penting pada Mac?

Kekalkan kedua-dua pengisytiharan dalam contoh. Data keserasian semasa MDN merekodkan sokongan sifat standard mulai Chrome 130 dan Firefox 32. Data itu merekodkan sokongan Safari dengan awalan -webkit- dan mengehadkan pelaksanaan tersebut kepada elemen sebaris. Periksa data keserasian pelayar MDN.

Had sebaris itu sesuai untuk tugas ini: frasa yang terpecah merentasi baris teks ialah pemecahan serpihan sebaris. Ini tidak membuktikan sokongan setara untuk serpihan blok merentasi lajur atau halaman bercetak. Nilai kes susun atur tersebut secara berasingan.

Uji fail itu dalam pelayar Mac yang penting untuk halaman anda. Gunakan tetingkap yang sempit dan lebar, kemudian besarkan teks halaman dan ulangi. Anggap bilangan baris sebagai berubah-ubah; syarat penerimaan anda ialah ruang dalam yang konsisten pada serpihan yang benar-benar dihasilkan oleh setiap pelayar.

Jika sesuatu persekitaran tidak mengenali mana-mana pengisytiharan, peningkatan pengklonan setiap baris tidak akan tersedia. Pastikan teks dan latar belakang asas kekal jelas digunakan, atau pilih gaya blok berjarak dalam jika satu latar belakang segi empat tepat memenuhi keperluan reka bentuk. Ini mengubah penampilan, jadi jadikan pilihan reka bentuk itu dengan sengaja.

Bagaimanakah anda mengelakkan latar belakang bertindih dan pembungkusan yang janggal?

Ruang dalam dan jarak baris menyelesaikan masalah yang berbeza. Pada kotak sebaris biasa, ruang dalam atas dan bawah boleh meluaskan kawasan yang diwarnakan tanpa menjauhkan kandungan sekeliling. Akibatnya, menambah ruang dalam menegak boleh menyebabkan baris serlahan bersebelahan bertindih. MDN mendokumentasikan tingkah laku kotak sebaris ini secara jelas. Lihat ruang dalam sebaris dan kandungan sekeliling.

Laraskan line-height tajuk bersama ruang dalam menegak serlahan. Contoh ini menggunakan nilai permulaan 1.65 yang sengaja lapang. Kurangkannya sedikit demi sedikit jika jaraknya terasa berlebihan, sambil memeriksa susun atur paling sempit setiap kali. Tiada satu nilai jarak yang sesuai untuk semua fon dan hiasan.

Gunakan urutan diagnostik ini untuk mengenal pasti puncanya sebelum mengubah lebih banyak CSS:

Perkara yang anda lihat Periksa dahulu Tindakan seterusnya
Ruang dalam hanya terdapat pada hujung luar frasa Tingkah laku hiasan Gunakan kedua-dua pengisytiharan clone pada elemen sebaris yang diserlahkan.
Satu segi empat tepat latar belakang yang besar Elemen yang memiliki latar belakang Letakkan latar belakang dan ruang dalam pada span sebaris di bahagian dalam.
Baris yang diserlahkan bersentuhan secara menegak Ruang dalam menegak dan ketinggian baris induk Kurangkan ruang dalam menegak atau tambah ketinggian baris.
Label panjang melangkaui bekas Peluang pembungkusan yang tersedia Pertimbangkan peraturan token panjang pilihan di bawah.
Hanya Safari tidak mempunyai ruang dalam hujung yang diingini Pengisytiharan berawalan Pastikan -webkit-box-decoration-break: clone kekal dalam helaian gaya.

Untuk label sintetik yang tidak boleh dipenggal seperti AmberTileSequenceAmberTileSequence, anda boleh menambah overflow-wrap: anywhere pada .sample-title. Ini ialah cebisan CSS pilihan untuk ditambah dalam peraturan sedia ada; bahagian contoh yang lain kekal sama.

/* Optional addition inside the existing .sample-title rule */
overflow-wrap: anywhere;

Ini membolehkan rentetan yang tidak boleh dipenggal dipenggal apabila perlu untuk mengelakkan limpahan, tanpa menyisipkan tanda sempang. Ia menambah peluang pembungkusan; ia tidak menghasilkan ruang dalam. Frasa biasa yang mempunyai ruang mungkin tidak memerlukannya. MDN mendokumentasikan syarat untuk overflow-wrap.

Pertimbangkan juga latar belakang itu sendiri. Dengan clone, latar belakang dilukis secara berasingan untuk setiap serpihan, jadi gradien atau imej latar belakang boleh bermula semula pada setiap baris. Gunakan warna padu apabila anda mahukan serlahan seragam tanpa corak imej berulang. W3C menerangkan latar belakang serpihan yang dilukis secara berasingan.

Kekalkan aliran teks semula jadi dan sempadan pembentukan aksara

Gunakan satu pembalut di sekeliling keseluruhan frasa yang dimaksudkan, bukannya menghasilkan pembalut berasingan untuk baris yang kelihatan pada masa ini. Ini menjadikan penanda bebas daripada lebar tetingkap dan pilihan fon semasa.

Elakkan daripada memecahkan perkataan kepada span aksara berjarak dalam untuk meniru kesan itu. Spesifikasi CSS Text menghendaki pembentukan aksara terputus merentasi sempadan sebaris apabila ruang dalam, sempadan atau jidar paksi sebaris yang bukan sifar memisahkan unit aksara tipografi yang bersebelahan. Oleh itu, sempadan berjarak dalam di tengah perkataan boleh menjejaskan pembentukan glif. Lihat peraturan W3C tentang pembentukan merentasi sempadan.

Untuk tajuk ini, letakkan pembalut pada sempadan frasa dan biarkan teks di dalamnya berterusan. Manfaat praktikalnya ialah anda mengelakkan penambahan sempadan berjarak dalam di dalam frasa. Ini tidak menjamin glif atau penghujung baris yang sama merentasi pelayar dan fon; periksa paparan sebenar yang ingin anda gunakan.

Bagaimana jika projek menggunakan Tailwind CSS?

Dalam projek Tailwind sedia ada, tambah box-decoration-clone pada elemen sebaris yang sudah memiliki latar belakang serlahan dan ruang dalam. Dokumentasi semasa Tailwind memetakan utiliti itu kepada box-decoration-break: clone. Utiliti box-decoration-slice memilih tingkah laku yang satu lagi. Lihat utiliti box-decoration-break Tailwind.

Kekalkan keperluan pelayar daripada contoh CSS biasa: periksa helaian gaya yang dijana untuk pengisytiharan berawalan apabila sokongan Safari diperlukan, dan tambahkannya melalui CSS tersuai projek jika tiada. Utiliti itu memilih tingkah laku hiasan; ia tidak menghapuskan batasan pelaksanaan pelayar.

Anda tidak perlu memperkenalkan Tailwind semata-mata untuk kesan ini. Contoh setempat yang lengkap sudah mengandungi CSS yang diperlukan.

Bolehkah serlahan tersuai menggunakan ruang dalam yang sama?

Julat Custom Highlight API CSS yang digayakan melalui ::highlight() mempunyai keupayaan yang berbeza daripada elemen sebaris yang digayakan. MDN menyenaraikan sifat yang dibenarkan, termasuk warna teks, warna latar belakang dan hiasan teks. Ruang dalam dan box-decoration-break tidak termasuk dalam senarai itu. Baca had penggayaan serlahan tersuai yang didokumenkan.

Jika anda mengawal penanda dan memerlukan ruang dalam sebenar pada setiap baris yang terbungkus, gunakan pembalut sebaris seperti yang ditunjukkan di atas. Jika anda perlu mengekalkan serlahan berasaskan julat tanpa pembalut, gunakan sifat warna dan hiasan yang disokong dan terima bahawa API ini tidak menyediakan kotak serpihan berjarak dalam.

Untuk tajuk atau frasa halaman yang terbungkus, kekalkan satu pembalut sebaris, letakkan latar belakang dan ruang dalam padanya bersama-sama, dan gunakan kedua-dua pengisytiharan clone. Akhiri dengan menguji lebar yang berbeza dan memeriksa jarak menegak. Semakan itu menentukan sama ada serlahan berfungsi dengan aliran teks sebenar, bukan hanya pada satu saiz tetingkap yang sesuai.

Sumber