Talian yang lebih baik untuk URL panjang

Trik CSS sebelum ini telah menangani pengendalian teks yang melimpah, tetapi penyelesaian yang komprehensif untuk URL yang panjang tetap terhad. Artikel Chris Coyier 2012 dan 2018 ("Mengendalikan kata-kata dan URL yang panjang" dan "Where Lines Break adalah rumit") menawarkan pandangan yang berharga, mencadangkan teknik yang memanfaatkan ciri-ciri penyemak imbas dan ciri-ciri penyusunan semula penyemak imbas:

 .dont-break-out {
  limpahan-wrap: break-word;
  Word-Wrap: Break-word;
  Word-Break: Break-word;
  Hyphens: Auto;
}

Walau bagaimanapun, kaedah ini tidak mempunyai ketepatan yang diperlukan untuk rehat URL terkawal, terutamanya apabila mematuhi panduan gaya tertentu.

Kepentingan garis pecah url

Pertimbangan estetik diketepikan, pemformatan URL yang konsisten adalah penting. Panduan gaya, seperti Chicago Manual of Style , menyediakan garis panduan untuk rehat URL dalam cetakan, walaupun mereka menawarkan kelonggaran untuk format digital. Walau bagaimanapun, senario seperti penerbitan cetak, PDF, resume dalam talian, atau bahkan mengekalkan permintaan konsistensi visual yang tepat terhadap kawalan garis URL.

Penempatan Pecah URL Strategik

Kebolehbacaan adalah yang paling penting. Berikutan gaya Chicago , rehat harus diselaraskan dengan tanda baca:

• Selepas kolon atau slash berganda ( // )
• Sebelum satu slash ( / ), tilde ( ~ ), tempoh ( . ), Koma ( , ), tanda hubung ( - ), garis bawah ( _ ), tanda tanya ( ? ), Tanda nombor ( # ), atau simbol peratus ( % )
• Sebelum atau selepas sama dengan tanda ( = ) atau ampersand ( & )

Elakkan memperkenalkan tanda hubung buatan; Walaupun tanda hubung lembut bermanfaat untuk rehat perkataan, mereka boleh disalahtafsirkan dalam URL. Mengutamakan rehat pada titik tanda baca yang ada.

Menguasai garis rehat dengan

Unsur ini menyediakan penyelesaian. Ia menandakan pemecahan garis yang berpotensi tanpa memaksa seseorang, membolehkan penyemak imbas memilih titik pemecahan yang optimum. Pertimbangkan contoh ini dari catatan 2012 Chris Coyier:

 <code>http://www.amazon.com/s/ref=sr_nr_i_o?rh=k:shark vacuum,i:garden&keywords=shark vacuum&ie=UTF8&qid=1327784979</code>

Menambah tag secara strategik:

 http: // www. Amazon .com / s / ref = sr _ nr _ I _O? RH = K: Vakum Shark, I: Garden & Keywords = Shark Vacuum & IE = UTF8 & Qid = 1327784979

Penyisipan manual adalah membosankan, memerlukan automasi. Fungsi JavaScript menggunakan ungkapan biasa boleh mengautomasikannya:

 fungsi formaturl (url) {
  var doublesLash = url.split ('//');
  var diformat = doubleslash.map (str =>
    str.replace (/(?<after> :)/giu, '$ 1')
      .replace (/(?<before> [/~. ,- _?#%asaan)/giu, '$ 1')
      .replace (/(?<beforeandafter> [= &])/giu, '$ 1')
    ) .join ('//');
  kembali diformatkan;
}</beforeandafter></before></after>

Sokongan pelaksanaan dan penyemak imbas

Demo langsung mempamerkan keberkesanan pendekatan ini. Integrasi dengan penjana tapak statik selanjutnya menyelaraskan proses. Menikmati sokongan penyemak imbas yang luas, dengan pengecualian terutamanya dalam versi IE yang lebih tua. Penyelesaian CSS menggunakan elemen pseudo dan ruang lebar sifar meningkatkan keserasian:

 WBR: Sebelum {
  Kandungan: "\ 200b";
  ruang putih: normal;
}

Mengutamakan URL yang dirasai dengan baik meningkatkan pengalaman pengguna, tanpa mengira gaya reka bentuk atau medium sasaran.

Rujukan

• Andrew, Rachel. 2015. "Merancang untuk Cetak dengan CSS." Majalah Smashing , 7 Januari. Https://www.php.cn/link/68e4593563e1b425a7717504bca103d6
• Andrew, Rachel. 2018. "Panduan kepada Negeri Gaya Cetak pada tahun 2018." Smashing Magazine , 1 Mei. Https://www.php.cn/link/d8001036d6702e430b8e0924844444ee1
• Coyier, Chris. 2012. "Mengendalikan kata -kata panjang dan URL (memaksa rehat, hyphenation, ellipsis, dll)." CSS-Tricks , 30 Januari 2012. Terakhir diubahsuai 25 Julai 2018. https://www.php.cn/link/F4D1F9E7D8C4235AD52D48B2F213CC38
• Coyier, Chris. 2018. "Di mana Break Lines adalah rumit. Ini semua CSS dan HTML yang berkaitan." CSS-Tricks , 9 Mei 2018. Diubahsuai terakhir 24 April 2020. https://www.php.cn/link/A18D17349A19926E1944714F747D330D
• Manual Gaya Chicago . 2017. Ed. Chicago: University of Chicago Press. https://www.php.cn/link/2e3a567dcc390811e4dfa8d478e4a149
• Putera. ND "Menukar HTML ke PDF dengan CSS." Diakses 25 Februari, 2021. Https://www.php.cn/link/13d8efdc6a5cb721fe7031be062b9b74
• Konsortium Unicode. 2009. "Kawasan Khas dan Format Watak." Dalam standard Unicode . Versi 5.2.0. https://www.php.cn/link/99407A87A33E79517280E0FDACDAA713
• Whatwg. ND "HTML: Standard Living." Diakses pada 25 Februari, 2021. Https://www.php.cn/link/767D3DD25ED652D33FA7743C0C2400FA

Atas ialah kandungan terperinci Talian yang lebih baik untuk URL panjang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!