Apa praktik terbaik untuk berurusan dengan jeda baris yang diinginkan dalam desain web responsif?

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- h5tag 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?

Saya hanya menyarankan ini karena digunakan untuk cuplikan teks pendek dan bukan paragraf.

Pemformatan tajuk berita dapat dan harus dikontrol sebanyak mungkin dalam batas yang wajar . JavaScript, atau elemen tambahan yang tidak perlu tidak cukup "batas wajar" .

Ruang Non-Breaking di sisi lain ... dapat berguna saat digunakan dalam jumlah sedang.
Menempatkan mereka di antara pasangan kata dan kembar tiga yang Anda ingin tetap bersama dapat menghasilkan hasil yang Anda inginkan.

Namun, Anda tidak dapat menggunakan banyak secara berurutan, tergantung pada panjang kata yang Anda gunakan, menghubungkan terlalu banyak akan memaksa teks meluap keluar dari viewport atau wadahnya.

Beberapa eksperimen cepat pada rangkaian kata Anda sendiri harus mengungkapkan kata-kata terbaik untuk ditautkan.

Sebagai contoh dalam pertanyaan ini, HTML dapat terlihat seperti:

<span>Our&nbsp;New thingamabob is&nbsp;the best&nbsp;thing since&nbsp;sliced&nbsp;bread!</span>

Sebenarnya tidak ada CSS yang diperlukan di sini. CSS dalam contoh ini saya buat hanya untuk bersenang-senang.

Singkatnya, kunci dari metode ini adalah membatasi jumlah tempat di mana teks diizinkan untuk dipecah.

Setelah membaca ulang pertanyaannya, saya sadar saya tidak cukup memenuhi persyaratan. Untuk kasus khusus ini, dan dengan asumsi bahwa ada halaman lain yang memerlukan perhatian yang sama, saya akan mendefinisikan satu <br>untuk breakpoint lebar penuh. Saya kemudian akan menggunakan kembali kelas yang sama pada setiap halaman di tempat yang paling ideal dalam tajuk.

<br>Kelas ini akan runtuh pada sesuatu yang lebih kecil dari akting lebar-lebar seolah-olah tidak ada di sana, dengan penggunaan kueri media. Pada ukuran viewport kurang dari lebar penuh, kami bergantung pada ukuran  saja.

Contoh lain dengan satu<br> yang lebih dekat dengan tanda.

HTML:

<span>
    Our&nbsp;New thingamabob is&nbsp;the<br class="full-width-breakpoint"/> best&nbsp;thing since&nbsp;sliced&nbsp;bread!
</span>

CSS:

@media screen and (max-width:550px) {    /* Max Width depends on your design */     
    .full-width-breakpoint {             /* only experimentation or */
        display:none;                    /* calculation will reveal */
        line-height:0;                   /* the best max-width */
    }
}

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.

Ada plugin jquery untuk itu, Balance Text .

Ini adalah plugin buatan Adobe yang dibuat berdampingan dengan proposal Adobe untuk mendapatkan opsi CSStext-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:

Keterbatasan

Kode ini saat ini hanya berfungsi pada teks dalam tag level blok tanpa elemen inline.

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.

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:

<p>This is some text and I want <span class="mobile-only-line-break">only this text to break, but only on mobile</span></p>

Maka saya akan memiliki CSS dengan sesuatu seperti ini:

@media all and (max-width: 767px) {
.mobile-only-line-break { 
display: block;
}
}

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.

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.

Metode saya saat ini ...

<h1>Our New thingamabob is the best thing since sliced bread!</h1>

Dan CSS:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
   h1 { margin: 0 auto; text-align: center; width: 280px; }
}

@media only screen 
and (min-width : 321px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (max-width : 320px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-width : 1224px) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    h1 { margin: 0 auto; text-align: center; width: 1200px; }
}


@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}

Lebar kadang-kadang membutuhkan penyesuaian berdasarkan teks aktual yang digunakan, tetapi ini adalah skema umum yang saya gunakan. Pada dasarnya mengurangi lebar h1tag 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.

Anda dapat menambahkan white-space: nowrapdan 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/wbr