Bisakah Anda menargetkan <br /> dengan css?

Apakah mungkin menargetkan <br/>tag break-line dengan CSS?

Saya ingin memiliki garis putus-putus 1px setiap kali ada jeda baris. Saya menyesuaikan situs dengan CSS saya sendiri dan tidak dapat mengubah himpunan HTML, jika tidak saya akan menggunakan cara lain.

Saya tidak berpikir itu mungkin tapi mungkin ada cara seseorang tahu tentang itu.

BRmenghasilkan break-line dan hanya break-line. Karena elemen ini tidak memiliki konten, hanya ada beberapa gaya yang masuk akal untuk diterapkan, seperti clearatau position. Anda dapat mengatur BRbatas tetapi Anda tidak akan melihatnya karena tidak memiliki dimensi visual.

Jika Anda ingin secara visual memisahkan dua kalimat, maka Anda mungkin ingin menggunakan penggaris horizontal yang ditujukan untuk tujuan ini. Karena Anda tidak dapat mengubah markup, saya khawatir hanya menggunakan CSS Anda tidak dapat mencapai ini.

Sepertinya, sudah dibahas di forum lain. Ekstrak dari Re: Mengatur ketinggian elemen BR menggunakan CSS :

[T] itu mengarah ke status yang agak aneh untuk BR di bahwa di satu sisi itu tidak diperlakukan sebagai elemen normal, tetapi sebagai contoh dari \ A dalam konten yang dihasilkan, tetapi di sisi lain itu diperlakukan sebagai elemen normal di mana (subset terbatas) properti CSS diizinkan di atasnya.

Saya juga menemukan klarifikasi dalam spesifikasi CSS 1 (tidak ada spesifikasi tingkat yang lebih tinggi menyebutkannya):

Properti dan nilai CSS1 saat ini tidak dapat menggambarkan perilaku elemen 'BR'. Dalam HTML, elemen 'BR' menentukan jeda baris di antara kata-kata. Efeknya, elemen digantikan oleh satu baris. Versi CSS masa depan mungkin menangani konten yang ditambahkan dan diganti, tetapi pembuat format berbasis CSS1 harus memperlakukan 'BR' secara khusus.

Tes Grant Wagner menunjukkan bahwa tidak ada cara untuk bergaya BRseperti yang dapat Anda lakukan dengan elemen lain. Ada juga situs online di mana Anda dapat menguji hasilnya di browser Anda .

Memperbarui

Pelms membuat beberapa penyelidikan lebih lanjut, dan menunjukkan bahwa IE8 (pada Win7) dan Chrome 2 / Safari 4b memungkinkan Anda untuk BRagak bergaya . Dan memang, saya memeriksa halaman demo IE dengan mesin IE8 IE Net Renderer , dan berhasil.

Pembaruan 2 c69 melakukan beberapa penyelidikan lebih lanjut, dan ternyata Anda dapat men - style penanda dengan brcukup berat (walaupun, bukan browser-silang), namun ini tidak akan memengaruhi line-break itu sendiri, karena tampaknya milik wadah induk.

Coba yang berikut ini, saya menggabungkannya menggunakan Pembaruan 2 dari jawaban lain dengan suara tinggi, dan itu berfungsi dengan baik untuk saya:

br
{   content: "A" !important;
    display: block !important;
    margin-bottom: 1.5em !important;
}

Ada satu alasan bagus Anda perlu mendesain <br>tag.

Ketika itu adalah bagian dari kode Anda tidak ingin (atau tidak bisa) berubah dan Anda ingin ini <br>tidak ditampilkan.

.xxx br {display:none}

Dapat menghemat banyak waktu dan terkadang hari Anda.

Untuk kepentingan pengunjung masa depan yang mungkin telah melewatkan komentar saya:

br {
    border-bottom:1px dashed black;
}

tidak bekerja.

Ini telah diuji di IE 6, 7 & 8, Firefox 2, 3 & 3.5B4, Safari 3 & 4 untuk Windows, Opera 9.6 & 10 (alpha) dan Google Chrome (versi 2) dan tidak bekerja di salah satu mereka. Jika suatu saat nanti seseorang menemukan browser yang mendukung perbatasan pada suatu <br>elemen, silakan perbarui daftar ini.

Perhatikan juga bahwa saya mencoba sejumlah hal lain:

br {
    border-bottom:1px dashed black;
    display:block;
}

br:before { /* and :after */
    border-bottom:1px dashed black;
    /* content and display added as per porneL's comment */
    content: "";
    display: block;
}

br { /* and :before and :after */
    content: url(a_dashed_line_image);
}

Dari semua itu, berikut ini berfungsi di Opera 9.6 dan 10 (alpha) (terima kasih porneL!):

br:after {
    border-bottom:1px dashed black;
    content: "";
    display: block;
}

Tidak terlalu berguna ketika hanya didukung dalam satu browser, tetapi saya selalu merasa menarik untuk melihat bagaimana browser yang berbeda mengimplementasikan spesifikasi.

Saya tahu Anda tidak dapat mengedit HTML, tetapi jika Anda dapat memodifikasi CSS, dapatkah Anda menambahkan javascript?

jika demikian, Anda bisa memasukkan jquery, maka Anda bisa melakukannya

<script language="javascript">
$(document).ready(function() {
    $('br').append('<span class="myclass"></span>');
});
</script>

br { padding: 1px 8px; border-bottom: 1px dashed #000 }

render seperti di bawah ini di IE8 ... tidak banyak digunakan hanya dalam satu browser.

(NB Saya menggunakan IE 8.0.7100 (pada Win7 RC) jika itu membuat perbedaan)

Juga,

br:after { content: "..." }  
br { content: "" }`

atau,

br:after {
    border: 1px none black;
    border-bottom-style: dashed;
    content: "";
    padding: 0 6px 0;
}

br { content: "" }

memberikan garis putus-putus di Chrome 2 / Safari 4b tetapi kehilangan jeda baris yang (kecuali siapa pun dapat menemukan cara untuk memperkenalkan kembali itu) membuatnya kurang berguna.

misalnya
uji IE8 , uji Chrome / Safari dan lainnya

Tes saya sendiri secara meyakinkan menunjukkan bahwa brtag tidak suka ditargetkan untuk css.

Tetapi jika Anda dapat menambahkan gaya maka Anda mungkin juga dapat menambahkan tag skrip ke header halaman? Tautan ke eksternal .jsyang melakukan sesuatu seperti ini:

function replaceLineBreaksWithHorizontalRulesInElement( element )
{
    elems = element.getElementsByTagName( 'br' );
    for ( var i = 0; i < elems.length; i ++ )
    {
        br = elems.item( i );
        hr = document.createElement( 'hr' );
        br.parentNode.replaceChild( hr, br );
    }
}

Jadi singkatnya, ini tidak optimal, tetapi inilah solusi saya.

ini tampaknya menyelesaikan masalah:

<!DOCTYPE html>

<style type="text/css">
#someContainer br { display:none }
#someContainer br + a:before { content:"|"; color: transparent; letter-spacing:-100px; border-left: 1px dashed black; margin:0 5px; }
</style>

<div id="someContainer"><a>link</a><br /><a>link</a><br /><a>link</a></div>

BR adalah elemen inline, bukan elemen blok.

Jadi, Anda perlu:

 br.Underline{
    border-bottom:1px dashed black;
    display: block;
  }

Kalau tidak, browser yang sedikit pemilih tentang hal-hal seperti itu akan menolak untuk menerapkan batas pada elemen BR Anda, karena elemen sebaris tidak memiliki batas, bantalan, atau margin.

DIPERBARUI 9/13/2019:

Tujuan penataan <br>tag seperti ini adalah untuk membuat jeda baris "lebih besar" (yaitu, dengan sedikit ruang ekstra di antara garis-garis).

Kelas "oldbig" (di bawah) telah diuji dan berfungsi dengan baik di Chrome 66.0.3359.181, Firefox Quantum 60.0.2, Edge 42.17134.1.0 dan IE 11.48.17134.0, untuk bergaya. Sayangnya, itu rusak di Chrome versi 76 dan turunannya (sekitar Agustus 2019). Gejalanya adalah bahwa ruang ekstra antara garis tidak lagi ditampilkan.

Kelas "newbig" diuji dan berfungsi dengan baik di versi Chrome saat ini (76.0.3809.132), Opera, Firefox, Edge, IE, Brave, dan Palemoon:

br.oldbig {line-height:190%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}

Ini demo:

br.oldbig {line-height:175%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}

<p style="max-width:20em">This is a paragraph which demonstrates the difference 
 between a line-break which occurs when the text exceeds the max-width, and a 
 line-break forced by a &lt;br&gt; tag here:<br>
 and a line break forced by a &lt;br class=oldbig&gt; tag here:<br class=oldbig>
 and a line break forced by a &lt;br class=newbig&gt; tag here:<br class=newbig>
 This is the next line after the &lt;br class=newbig&gt; tag (but still 
 part of the same paragraph).</p>
<p style="max-width:20em">And this is another paragraph, entirely.</p>

Ini hasilnya, ditampilkan di Chrome v.76:

Ini akan berhasil, tetapi hanya di IE. Saya mengujinya di IE8.

br {

  border-bottom: 1px dashed #000000;
  background-color: #ffffff;
  display: block;
  }

Saya menempatkan <br>tag ke dalam <span>tag dan dapat digunakan display:none;pada <span>kontrol untuk tidak menggunakan <br>tag menggunakan Kueri Media.

pertanyaan lama tapi ini adalah perbaikan yang cukup rapi dan bersih, mungkin digunakan untuk orang-orang yang masih bertanya-tanya apakah itu mungkin :):

br{
    content: '.';
    display: inline-block;
    width: 100%;
    border-bottom: 1px dashed black;
}

dengan perbaikan ini, Anda juga dapat menghapus BR di situs web (cukup setel lebar ke 0px)

Mengapa tidak menggunakan tag HR saja? Itu dibuat persis untuk apa yang Anda inginkan. Agak suka mencoba membuat garpu untuk makan sup ketika ada sendok tepat di depan Anda di atas meja.