Saya memiliki paragraf besar teks yang dibagi menjadi beberapa sub-paragraf dengan <br>:

<p>
  Blah blah blah.
  <br/>
  Blah blah blah. Blah blah blah. Blah blah blah.
  <br/>
  Blah blah blah.
</p>

Saya ingin memperlebar jarak antara sub-ayat ini, seperti ada dua <br>atau lebih. Saya tahu bahwa cara yang tepat untuk melakukan ini adalah menggunakan <p></p>, tetapi saat ini saya tidak dapat mengubah tata letak ini, jadi saya mencari solusi khusus CSS.

Saya sudah mencoba pengaturan <br>'s line-heightdan heightdengan display: block, saya juga Googled dan Stack Overflow-ed sebentar, tetapi tidak menemukan solusi apapun. Apakah ini bahkan mungkin tanpa mengubah tata letak?

Css:

br {
   display: block;
   margin: 10px 0;
}

Solusinya mungkin tidak kompatibel lintas-browser, tetapi setidaknya ini adalah sesuatu. Pertimbangkan juga pengaturan line-height:

line-height:22px;

Untuk Google Chrome, pertimbangkan pengaturan content:

content: " ";

Selain itu, saya pikir Anda terjebak dengan solusi JavaScript.

Berikut adalah solusi yang benar yang sebenarnya memiliki dukungan lintas-browser:

  br {
        line-height: 150%;
     }

Jadi, intip di atas pada dasarnya mendapat jawaban yang sama, tetapi di sini sangat ringkas. Bekerja di Opera, Chrome, Safari & Firefox, kemungkinan besar IE juga?

br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 0; /* change this to whatever height you want it */
}

Cara lain adalah dengan menggunakan SDM . Tapi, dan inilah bagian yang licik, membuatnya tidak terlihat.

Jadi:

<hr style="height:30pt; visibility:hidden;" />

Untuk membuat BR break yang bersih disimulasikan menggunakan HR: Btw berfungsi di semua browser !!

{ height:2px; visibility:hidden; margin-bottom:-1px; }

Sejauh yang saya tahu <br>tidak memiliki ketinggian, itu hanya memaksa garis putus. Apa yang Anda miliki adalah teks dengan beberapa jeda baris sebagai tambahan dari yang dibungkus otomatis, bukan sub - paragraf. Anda dapat mengubah spasi baris, tetapi itu akan memengaruhi semua baris.

Saya baru saja mengalami masalah ini, dan saya mengatasinya dengan menggunakan

<div style="line-height:150%;">
    <br>
</div>

Anda bisa menerapkan tinggi garis pada <p>elemen itu, sehingga garis menjadi lebih besar.

Saya belum pernah mencoba elemen pseudo :before/ :afterCSS2 sebelumnya, terutama karena itu hanya didukung di IE8 (ini tentang browser IE) . Ini bisa menjadi satu-satunya solusi CSS yang mungkin:

br:before {
    display: block;
    margin-top: 10px;
    content: "";
}

Berikut ini adalah contoh di QuirksMode .

Saya punya pemikiran bahwa Anda mungkin dapat menggunakan:

br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

Tapi itu tidak berhasil pada chrome atau firefox.

Hanya berpikir saya akan menyebutkan bahwa jika terjadi pada orang lain dan saya akan menyelamatkan mereka dari masalah.

br {   
    content: "";
    margin: 2em;
    display: block;
    margin-bottom: -20px; 
 }

Bekerja di Firefox, Chrome & Safari. Belum diuji di Explorer. (Windows-tablet kehabisan daya.)

Line-break, ukuran font berfungsi berbeda di Firefox & Safari.

Menariknya, jika tag break ditulis dalam bentuk penuh sebagai berikut:

<br></br>

lalu ketinggian garis CSS: 145% berfungsi. Jika tag istirahat dituliskan sebagai:

<br> or 
<br/> 

maka itu tidak berfungsi, setidaknya di Chrome, IE dan firefox. Aneh!

Apa yang berhasil bagi saya adalah menambahkan inline ini antara tag paragraf ... bukan solusi terbaik.

<br style="line-height:32px">

-------- Edit ---------

Saya mengalami masalah dengan PC / Mac dengan ini ... Ini memberi teks ketinggian baris baru tetapi tidak melakukan break-line ... Anda mungkin ingin melakukan beberapa tes sendiri. Maaf!

Dan ingat bahwa (salah) menggunakan <hr>tag seperti yang disarankan di suatu tempat, akan mengakhiri <p>tag, jadi lupakan solusi itu.
Jika f.ex. sesuatu ditata di sekitarnya <p>, gaya itu hilang untuk sisa konten setelah <hr>dimasukkan.

Berikut adalah solusi yang berfungsi di IE, Firefox, dan Chrome. Idenya adalah untuk meningkatkan ukuran font elemen br dari ukuran tubuh 14px menjadi 18px, dan menurunkan elemen dengan 4px sehingga ukuran ekstra di bawah garis teks. Hasilnya adalah 4px spasi ekstra di bawah br.

br 
{ 
font-size: 18px; 
vertical-align: -4px; 
}  

DIPERBARUI 13 Sep 2019:

Saya menggunakan <br class=big>untuk membuat jeda baris kebesaran, ketika saya membutuhkannya. Sampai hari ini, saya bergaya seperti ini:

br.big {line-height:190%;vertical-align:top}

(Itu vertical-align:tophanya diperlukan untuk IE dan Edge.)

Itu bekerja di semua browser utama yang saya coba: Chrome, Firefox, Opera, Brave, PaleMoon, Edge, dan IE11.

Namun, baru-baru ini berhenti bekerja di browser berbasis Chrome : jeda baris "besar" saya berubah menjadi jeda baris berukuran normal.

(Saya tidak tahu persis kapan mereka memecahkannya. Pada 12 September 2019 masih berfungsi di Chromium Portable 55.0.2883.11 saya yang sudah ketinggalan zaman, tetapi rusak di Opera 63.0.3368.71 dan Chrome 76.0.3809.132 (keduanya Windows) dan Android).)

Setelah beberapa percobaan dan kesalahan, saya berakhir dengan pengganti berikut, yang berfungsi di versi saat ini dari semua browser tersebut:

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

Catatan:

line-height:190% berfungsi dalam segala hal kecuali versi terbaru dari browser berbasis Chrome.

vertical-align:topdiperlukan untuk IE dan Edge (dalam kombinasi dengan line-height:190%), untuk mendapatkan ruang ekstra untuk datang setelah garis sebelumnya, di mana ia berada, daripada sebagian sebelum dan sebagian sesudahnya.

display:block;content:"";margin-top:0.5em berfungsi di Chrome, Opera & Firefox, tetapi bukan Edge & IE.

Cara alternatif (lebih sederhana) untuk menambahkan sedikit ruang vertikal tambahan setelah <br>tag, jika Anda tidak keberatan mengedit HTML, adalah dengan sesuatu seperti ini. Ini berfungsi dengan baik di semua browser:

<span style="vertical-align:-37%"> </span><br>

(Anda tentu saja dapat menyesuaikan "-37%" sesuai kebutuhan, untuk celah yang lebih besar atau lebih kecil.) Berikut ini adalah halaman demo yang menyertakan beberapa variasi lain pada tema:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html



28 Mei 2020:

Saya telah memperbarui halaman demo; sekarang menunjukkan semua teknik di atas:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

Michael dan yoda keduanya benar. Yang dapat Anda lakukan adalah menggunakan <p>tag, yang, sebagai tag blok, menggunakan margin bawah untuk mengimbangi blok berikut, sehingga Anda dapat melakukan sesuatu yang mirip dengan ini untuk mendapatkan jarak yang lebih besar:

<p>
    A block of text.
</p>
<p>
    Another block
</p>

Alternatif lain adalah dengan menggunakan <hr>tag blok , yang dengannya Anda dapat secara eksplisit menentukan ketinggian spasi.

<br />akan mengambil ruang sebanyak baris diisi teks Anda <p>, Anda tidak dapat mengubahnya. Jika Anda ingin yang lebih besar, itu berarti Anda ingin memisahkan ke dalam paragraf, jadi tambahkan yang lain <p>. Jangan lupa menjadi yang paling semantik yang Anda bisa;)

Anda juga dapat menggunakan properti "blok-kutipan" di CSS. Itu akan membuatnya jadi tidak memengaruhi baris individual Anda, tetapi memungkinkan Anda untuk mengatur parameter hanya jeda antara paragraf atau "blokir kutipan".

UPDATE:
Saya berdiri dikoreksi. "blockquote" sebenarnya adalah properti html. Anda menggunakannya seperti <p> ​​dan </ p> di sekitar pekerjaan Anda. Anda kemudian dapat mengatur parameter untuk kutipan blok Anda dalam css seperti

blockquote { margin-top: 20px }

Semoga ini membantu. Ini mirip dengan pengaturan parameter pada br dan mungkin atau mungkin tidak kompatibel lintas browser.

Anda tampaknya tidak dapat menyesuaikan ketinggian BR, tetapi Anda dapat membuatnya menghilang dengan andal menggunakan tampilan: tidak ada

Datang di halaman ini saat mencari solusi untuk hal berikut:

Saya memiliki situasi di mana gateway pembayaran pihak ke-3 (Worldpay) hanya memungkinkan Anda menyesuaikan halaman pembayaran mereka dengan maksimum 10 ribu CSS dan HTML (skrip tidak diizinkan) yang disuntikkan ke tubuh templat mereka, dan setelah beberapa BR, tag FONT dll. Ditambah dengan DTD mereka yang memaksa IE7 / 8 ke mode Quirks, ini membuat penyesuaian lintas-browser sekeras yang didapat!

Mematikan BR membuat segalanya lebih konsisten ...

saya menggunakan metode ini, tetapi saya tidak tahu apakah cross-browser

================= Metode 1 ==================

br {
    display:none;
}

ATAU

================= Metode 2 =================

br {
    display: block;
    margin-bottom: 2px;
    font-size:2px;
    line-height: 2px;
}
br:before {
    display: block;
    margin-top: 2px;
    content: "";
}
br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

ATAU

================= Metode 3 =================

br:after { content: "" }
br { content: "" }

Coba gunakan line-heightatribut CSS pada ptag Anda yang berisi brtag. Ingat Anda dapat idAnda ptag jika Anda ingin mengisolasi, meskipun mungkin lebih baik menggunakan divuntuk isolasi, IMO.

Maaf jika orang lain sudah mengatakan ini, tetapi solusi sederhananya adalah bermain-main dengan "garis-tinggi" Anda. Jika Anda mendapatkan terlalu banyak ruang saat menggunakan penghentian garis, itu hanya karena Anda mengatur ketinggian garis terlalu tinggi. Anda dapat memperbaikinya dalam CSS (tetapi tahu itu akan mempengaruhi semua yang menggunakan properti itu) atau Anda bisa melakukan gaya inline untuk mengganti CSS.

Saya harus mengembangkan solusi untuk mengonversi HTML ke PDF, dan memusatkan teks pada sel tabel secara vertikal, tetapi tidak ada yang berhasil selain memasukkan teks biasa <br>

Jadi, berpikir di luar kotak, saya telah mengubah ukuran vertikal dengan menyesuaikan ukuran font (dalam pt).

<font style="font-size: 4pt"><br></font>

<span style="line-height:40px;"><br></span> 

Anda harus melakukan inline ini dan pada setiap
elemen tetapi itu harus bekerja pada sebagian besar browser Fiddle dengan ketinggian garis untuk mendapatkan efek yang diinginkan. Jika Anda membuatnya sejajar di setiap elemen, itu harus bekerja di sebagian besar browser dan email (tapi ini terlalu rumit untuk dibahas di sini).

Ini berguna bagi saya ketika saya tidak bisa mendapatkan penspasian gaya untuk bekerja dari tag rentang:

        <p style='margin-bottom: 5px' >
            <span>I Agree</span>
        </p>
        <span>I Don't Agree</span>

Menggunakan <div>

<div>Content 1</div>Content 2

Ini memungkinkan untuk baris baru tanpa ruang vertikal.

Ini menjadi

<div>Content 1</div>Content 2

Menjawab pada tingkat yang lebih umum bagi siapa saja yang mendarat di sini karena mereka memperbaiki masalah dalam jarak yang disebabkan oleh <br>tag. Saya harus melakukan banyak reset untuk mendapatkan pixel yang mendekati sempurna.

br {
    content: " ";
    display: block;
}

Untuk masalah spesifik yang saya bahas, saya harus memiliki ruang khusus di antara garis-garis tersebut. Saya menambahkan margin ke atas dan bawah.

br {
    content: " ";
    display: block;
    margin: 0.25em 0;
}

Saya membuatnya bekerja di IE7 dengan menggunakan kombo solusi, tetapi terutama membungkus Br di DIV seperti yang disarankan Nigel dan yang lainnya. Menambahkan Id dan jalankan di = "server" sehingga saya bisa menghapus BR ketika menghapus kotak centang dari deretan kotak centang.

.narrow {
    display: block;
    margin: 0px;
    line-height: 0px;
    content: " "; 
}

<div class="narrow" run at="server"><br></br></div>

Mungkin menggunakan dua tag br adalah solusi paling sederhana yang berfungsi dengan semua browser. Tapi ini berulang.

<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>

Bagaimana kalau hanya menambahkan paragraf alih-alih dari jeda baris seperti itu

bla la la bla bla abla la la bla bla abla la la bla bla a

Kemudian Anda dapat menentukan ketinggian baris atau padding atau apa pun untuk hal itu