Abaikan <br> dengan CSS?

Saya bekerja di situs yang memiliki jeda baris seperti <br>di beberapa judul. Dengan asumsi saya tidak dapat mengedit HTML sumber, apakah ada cara dengan CSS saya dapat mengabaikan jeda ini?

Saya sedang mengoptimalkan situs untuk seluler, jadi saya tidak benar-benar ingin menggunakan JavaScript.

Dengan css, Anda dapat "menyembunyikan" tag br dan mereka tidak akan berpengaruh:

br {
    display: none;
}

Jika Anda hanya ingin menyembunyikan beberapa dalam tipe heading tertentu, buat saja css Anda lebih spesifik.

h3 br {
    display: none;
}

Catatan: Solusi ini hanya berfungsi untuk browser Webkit, yang salah menerapkan elemen semu ke tag yang menutup sendiri.

Sebagai tambahan dari jawaban di atas, perlu dicatat bahwa dalam beberapa kasus seseorang perlu memasukkan spasi daripada hanya mengabaikan <br>:

Misalnya jawaban di atas akan berubah

Monday<br>05 August

untuk

Monday05 August

seperti yang telah saya verifikasi saat mencoba memformat kalender acara mingguan saya. Spasi setelah "Senin" lebih disukai untuk disisipkan. Ini dapat dilakukan dengan mudah dengan memasukkan yang berikut ini ke dalam CSS:

br  {
    content: ' '
}
br:after {
    content: ' '
}

Ini akan membuat

Monday<br>05 August

terlihat seperti

Monday 05 August

Anda dapat mengubah contentatribut br:aftermenjadi ', 'jika Anda ingin memisahkan dengan koma, atau meletakkan apapun yang Anda inginkan di dalamnya ' 'untuk menjadikannya pembatas! Ngomong-ngomong

Monday, 05 August

terlihat rapi ;-)

Lihat di sini untuk referensi.

Seperti pada jawaban di atas, jika Anda ingin membuatnya spesifik untuk tag, Anda bisa. Seperti jika Anda ingin properti ini berfungsi untuk tag <h3>, cukup tambahkan h3masing - masing sebelum brdan br:after, misalnya.

Ini bekerja paling umum untuk pseudo-tag.

Jika Anda menambahkan gaya

br{
    display: none;
}

Maka ini akan berhasil. Tidak yakin apakah itu akan berfungsi di versi IE yang lebih lama.

Inilah cara saya melakukannya:

br { 
    display: inline;
    content: ' ';
    clear:none;
}

Anda dapat menggunakan spanelemen alih-alih brjika Anda ingin metode spasi putih berfungsi, karena ini bergantung pada elemen pseudo yang "tidak ditentukan" untuk elemen yang diganti.

HTML

<p>
   To break lines<span class="line-break">in a paragraph,</span><span>don't use</span><span>the 'br' element.</span>
</p>

CSS

span {white-space: pre;}

span:after {content: ' ';}

span.line-break {display: block;}

span.line-break:after {content: none;}

DEMO

Jeda baris hanya dicapai dengan menyetel elemen rentang yang sesuai ke display:block.

Dengan menggunakan ID dan / atau Kelas di markup HTML Anda, Anda dapat dengan mudah menargetkan setiap atau kombinasi elemen rentang dengan CSS atau menggunakan pemilih CSS seperti nth-child().

Jadi, Anda dapat, misalnya, menentukan break point yang berbeda dengan menggunakan kueri media untuk tata letak responsif.

Dan Anda juga dapat menambahkan / menghapus / beralih kelas dengan Javascript (jQuery).

"Keuntungan" dari metode ini adalah ketangguhannya - berfungsi di setiap browser yang mendukung elemen semu (lihat: Dapatkah saya menggunakan - konten yang dihasilkan CSS ).

Sebagai alternatif, dimungkinkan juga untuk menambahkan jeda baris melalui pseudo-elemen:

span.break:before {  
    content: "\A";
    white-space: pre;
}

DEMO

Bagi saya terlihat lebih baik seperti ini:

Some text, Some text, Some text

br {
  display: inline;
  content: '';
}

br:after {
  content: ', ';
  display: inline-block;
}

<div style="display:block">
  <span>Some text</span>
  <br>
  <span>Some text</span>
  <br>
  <span>Some text</span>
</div>

Untuk itu Anda bisa melakukan seperti ini:

br{display: none;}

dan jika berada di dalam beberapa tag PRE, maka Anda bisa dan jika Anda ingin tag PRE berperilaku seperti elemen blok biasa, Anda dapat menggunakan CSS ini:

pre {white-space: normal;}

Atau Anda bisa mengikuti gaya Aneesh Karthik C seperti:

br  {content: ' '}
br:after {content: ' '}

Saya pikir Anda mengerti

Sesuai pertanyaan Anda, untuk mengatasi masalah ini untuk Firefox dan Opera menggunakan pendekatan Aneesh Karthik C Anda perlu menambahkan atribut "float" right ".

Lihat contohnya di sini. CSS ini berfungsi di Firefox (26.0), Opera (12.15), Chrome (32.0.1700) dan Safari (7.0)

br {
   content: " ";  
   float:right; 
}

Saya harap ini akan menjawab pertanyaan Anda !!

Meskipun pertanyaan ini tampaknya sudah terpecahkan, jawaban yang diterima tidak menyelesaikan masalah untuk saya di Firefox. Firefox (dan mungkin IE, meskipun saya belum mencobanya) lewati spasi saat membaca konten dari tag "konten". Meskipun saya benar-benar memahami mengapa Mozilla melakukan itu, hal itu membawa banyak masalah. Solusi termudah yang saya temukan adalah menggunakan ruang yang tidak dapat dipecahkan, bukan yang biasa seperti yang ditunjukkan di bawah ini.

.noLineBreaks br:before{
content: '\a0'
}

Coba lihat .

Ya, Anda bisa mengabaikan ini <br>. Anda mungkin memerlukan ini terutama dalam kasus desain responsif di mana Anda perlu menghapus jeda untuk perangkat seluler.

HTML

<h2>

  Where ever you go <br class="break"> i am there.

</h2>

Contoh CSS untuk seluler

/* Resize the browser window to check */

@media (max-width: 640px) 
{
  .break {display: none;}
}

Lihat Codepen ini:
https://codepen.io/fluidbrush/pen/pojGQyM

Anda cukup mengubahnya dalam komentar ..

Atau Anda bisa melakukan ini:

br {
display: none;
}

Tetapi jika Anda tidak menginginkannya mengapa Anda menaruhnya di sana?