Saya merancang banyak item web halaman tunggal sederhana untuk penjualan atau email. Saya sering menemukan saya mengalami masalah dengan tajuk berita dan jeda baris yang saya inginkan berbeda lebar media.
Misalnya, saya dapat memiliki judul seperti:
Halamabob baru kami adalah yang terbaik sejak roti irisan!
Dengan benar-benar tidak ada perhatian pada jeda baris, jeda baris seperti ini:
Halamabob baru kami adalah yang terbaik sejak
roti irisan!
Pada ukuran web penuh, saya ingin memutus garis setelah "the". Membuat dua garis.
Halamabob baru kami adalah yang
terbaik sejak roti irisan!
Untuk layar dengan lebar sedang, saya akan pecah dua kali:
Halamabob baru kami
adalah yang terbaik
sejak roti irisan!
Untuk layar yang lebih sempit, saya akan merusak "baru", setelah "thingamabob", dan setelah "benda". Menciptakan empat garis.
Halamabob baru kami
adalah yang terbaik
sejak roti irisan!
Saya benar - benar tidak ingin menggunakan tag break ( <br>
) karena hard-set istirahat di semua ukuran. Sampai sekarang saya telah menggunakan kueri media dan persentase lebar untuk berbagai h1
- h5
tag sehingga lebar tag memaksa istirahat. Tetapi bagi saya ini tampak "kasar" ( kadang-kadang juga sangat temperamental berdasarkan teks yang sebenarnya).
Apa cara terbaik untuk mengontrol jeda baris tanpa mengkodekannya ke dalam html?
Praktik terbaik adalah mengakui bahwa Anda tidak memiliki kontrol nyata atas jeda baris di web dan yang terbaik adalah merancang dengan itu dalam pikiran.
Setiap solusi yang bertentangan akan, selalu harus diretas. Karena ini akan menjadi peretasan karena HTML tidak mematuhi jeda baris yang ditentukan pengguna di luar pengodean keras. Anda bisa melakukannya dengan JS dengan cukup mudah. Siapkan titik istirahat Anda dengan rentang kosong dengan kelas-kelas unik kemudian berdasarkan pada ukuran area pandang Anda dapat menyuntikkan tag BR ke setiap SPAN yang diinginkan.
Ada beberapa gaya CSS yang akan bekerja pada peramban yang lebih baru untuk mengontrol cara peramban menangani pembungkus garis, tetapi itu masih tidak akan memberi Anda kontrol yang tepat yang Anda cari dalam situasi ini.
Di sisi lain, jika tujuan Anda tidak terlalu banyak untuk mengontrol jeda baris tertentu, tetapi untuk memastikan blok teks Anda 'bertumpuk' di baris yang relatif sama, saya akan mengatur lebar DIV berbeda untuk setiap viewport. Itu tidak akan sempurna, tetapi mungkin cukup dekat dan mungkin merupakan kompromi terbaik.
sumber
Ada plugin jquery untuk itu, Balance Text .
Ini adalah plugin buatan Adobe yang dibuat berdampingan dengan proposal Adobe untuk mendapatkan opsi CSS
text-wrap: balance;
yang hanya akan melakukan ini seperti fitur Balance Ragged Lines milik Adobe InDesign (terdengar hebat, tetapi meskipun diterima, itu akan memakan waktu bertahun-tahun sebelum browser mendukungnya).Plugin, bagaimanapun, berfungsi sekarang. Ini menyeimbangkan setiap elemen yang memiliki kelas
balance-text
, atau menggunakan jQuery like$('.some-elements').balanceText();
Ini demo resmi Adobe , menggunakan teks yang dibenarkan .
Berikut ini adalah demo yang saya buat menggunakan
<h1>
s rata -rata kiri - edit untuk melihat kode. Ini menunjukkan beberapa batasan pada saat penulisan:Dalam demo 4 Anda akan melihat bagaimana sesuatu dalam blok Anda dari teks yang seimbang seperti
<a>
link<span>
s atau penekanan seperti<em>
,<strong>
,<b>
,<i>
dll akan dihapus.Juga, membandingkan demo 1, 2 dan 5, Anda akan melihat Anda tampaknya perlu menggunakan kedua kelas CSS dan panggilan jQuery.
Tampaknya cukup dapat diandalkan tetapi kadang-kadang glitchy - pada saat penulisan, kadang-kadang tergelincir ketika berada di kolom samping, meninggalkan anak yatim piatu (tetapi tampaknya bekerja 95% lebih dari waktu dan saya belum melihatnya tergelincir kecuali ketika berada di kolom samping), dan untuk alasan yang tidak dijelaskan, demo saya tidak berfungsi di Firefox tetapi demo Adobe melakukannya (baik di IE9 +, tidak dapat menguji di IE8 sekarang). Jika Anda menggunakannya, faktor dalam beberapa waktu pengujian.
sumber
Saya harus berurusan dengan ini agak teratur, dengan masukan dari desainer yang ingin hal-hal untuk memecahkan cara tertentu. Saya telah menemukan cara paling mudah untuk melakukan ini adalah dengan meletakkan rentang dengan kelas di dalam teks, dan kemudian memiliki rentang itu
display: block;
untuk permintaan media.Jadi akan terlihat seperti ini:
Maka saya akan memiliki CSS dengan sesuatu seperti ini:
Anda masih harus melewati dan mempercayainya untuk memastikan hal-hal melanggar cara yang Anda inginkan untuk semua lebar.
Jika ini merupakan masalah yang sering terjadi, Anda dapat membuat sendiri set kelas break-line ala Twitter Bootstrap atau sistem grid apa pun yang Anda gunakan, memodelkan nama kelas setelah konvensi penamaan apa pun yang Anda gunakan.
sumber
Anda dapat menggunakan JavaScript untuk mendeteksi lebar layar dan menulis versi yang benar (dengan <br> seperti yang Anda miliki di pos Anda) ke dalam div kosong melalui innerHTML.
Sayangnya, "istirahat web yang diinginkan" dan "praktik web terbaik" tidak sejalan. Lepaskan keinginan perfeksionis Anda untuk mendapatkan setiap kata di tempat yang tepat - ada terlalu banyak kemungkinan layar dan terlalu banyak pembaca yang tidak memiliki pola pikir desainer sehingga Anda harus peduli dengan jeda baris dalam judul mereka. Cari Desain Web Responsif untuk mendapatkan pemahaman yang lebih baik tentang masalah ini.
sumber
Metode saya saat ini ...
Dan CSS:
Lebar kadang-kadang membutuhkan penyesuaian berdasarkan teks aktual yang digunakan, tetapi ini adalah skema umum yang saya gunakan. Pada dasarnya mengurangi lebar
h1
tag sehingga garis memecah di tempat yang saya inginkan.Ini berhasil, itu hanya membutuhkan pengujian menyeluruh untuk memastikan istirahat terjadi di mana yang diinginkan. Tapi, maka pengujian menyeluruh diperlukan dalam hal apa pun. Jadi, belum tentu lebih banyak pekerjaan dalam hal itu.
sumber
margin: 0 auto; text-align: center;
hanya sekali di luar kueri media dan itu akan berlaku untuk semuanyaAnda dapat menambahkan
white-space: nowrap
dan menempatkan<wbr>
di tempat-tempat di mana Anda ingin mengizinkan jeda baris. Jika ini tidak cukup dan Anda ingin kontrol yang baik dengan permintaan media Anda masih dapat menambahkan kelas seperti<wbr class="mobileOnly">
<wbr>
doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbrsumber