keluaran:

Halo
Apa kabar

kode:

<p>hello <br> How are you </p>

Bagaimana cara mencapai output yang sama tanpa <br>?

Tidak mungkin dengan struktur HTML yang sama, Anda harus memiliki sesuatu untuk dibedakan antara Hellodan How are you.

Saya sarankan menggunakan spans yang kemudian akan ditampilkan sebagai blok (seperti <div>sebenarnya).

p span {
  display: block;
}

<p><span>hello</span><span>How are you</span></p>

Anda dapat menggunakan white-space: pre;untuk membuat elemen bertindak seperti <pre>, yang mempertahankan baris baru. Contoh:

p {
  white-space: pre;
}

<p>hello 
How are you</p>

Catatan untuk IE bahwa ini hanya berfungsi di IE8 +.

Gunakan <br/>seperti biasa, tetapi sembunyikan display: noneketika Anda tidak menginginkannya.

Saya berharap sebagian besar orang menemukan pertanyaan ini ingin menggunakan desain css / responsif untuk memutuskan apakah ada jeda baris di tempat tertentu. (dan tidak punya masalah pribadi dengan <br/>)

Sementara tidak segera jelas, Anda benar-benar dapat menerapkan display:noneke <br/>tag untuk menyembunyikannya, yang memungkinkan penggunaan query media dalam tandem dengan tag BR semantik.

 <div>
   The quick brown fox<br />
   jumps over the lazy dog
 </div>

 @media screen and (min-width: 20em) 
 {
    br 
    { 
       display: none;   // hide the BR tag for wider screens (i.e. disable the line break)
    }
 }

Ini berguna dalam desain responsif di mana Anda perlu memaksa teks menjadi dua baris sekaligus.

http://jsfiddle.net/nNbD3/1/

Ada beberapa opsi untuk mendefinisikan penanganan ruang putih dan jeda baris. Jika seseorang dapat memasukkan konten ke dalam <p>tag misalnya , cukup mudah untuk mendapatkan apa pun yang diinginkannya.

Untuk mempertahankan jeda baris tetapi tidak menggunakan spasipre-line ( preseperti) seperti di:

<style>
 p {
     white-space: pre-line; /* collapse WS, preserve LB */
   }
</style>

<p>hello
How are you</p>

Jika perilaku lain yang diinginkan pilih salah satu dari ini (WS = WhiteSpace, LB = LineBreak):

     white-space: normal;   /* collapse WS, wrap as necessary, collapse LB */
     white-space: nowrap;   /* collapse WS, no wrapping,       collapse LB */
     white-space: pre;      /* preserve WS, no wrapping,       preserve LB */
     white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
     white-space: inherit;  /* all as parent element */

SUMBER: Sekolah W3

Perintah "\ a" di CSS menghasilkan carriage return. Ini CSS, tidak HTML, sehingga akan lebih dekat dengan apa yang Anda inginkan: tidak ada markup tambahan .

Dalam blockquote, contoh di bawah ini menampilkan judul dan tautan sumber dan pisahkan keduanya dengan carriage return ( "\a"):

blockquote[title][cite]:after {
    content:attr(title)"\a"attr(cite)
}

Di CSS gunakan kode

p {
    white-space: pre-line;
}

Dengan kode ini css setiap entri di dalam tag P akan menjadi break-line di html.

Membangun dari apa yang telah dikatakan sebelumnya, ini adalah solusi CSS murni yang berfungsi.

<style>
  span {
    display: inline;
  }
  span:before {
    content: "\a ";
    white-space: pre;
  }
</style>
<p>
  First line of text. <span>Next line.</span>
</p>

<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------

ATAU

<div style="white-space:pre">  <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div>                         <-----------------------------------

sumber: https://stackoverflow.com/a/36191199/2377343

Untuk membuat elemen memiliki garis istirahat sesudahnya, tetapkan:

display:block;

Elemen non-mengambang setelah elemen level blok akan muncul di baris berikutnya. Banyak elemen, seperti <p> ​​dan <div> sudah memblokir elemen level sehingga Anda bisa menggunakannya.

Tetapi meskipun ini baik untuk diketahui, ini sangat tergantung pada konteks konten Anda. Dalam contoh Anda, Anda tidak ingin menggunakan CSS untuk memaksa jeda baris. <br /> sesuai karena secara semantik tag p adalah yang paling tepat untuk teks yang Anda tampilkan. Lebih banyak markup hanya untuk menggantung CSS saja tidak perlu. Secara teknis itu tidak persis sebuah paragraf, tetapi tidak ada <salam> tag, jadi gunakan apa yang Anda miliki. Menjelaskan konten Anda dengan baik dengan HTML cara yang lebih penting - setelah Anda memiliki kemudian mencari cara untuk membuatnya terlihat cantik.

Berikut ini adalah solusi buruk untuk pertanyaan buruk, tetapi yang secara harfiah memenuhi ringkasan:

p {
    width : 12ex;
}

p:before {
    content: ".";
    float: right;
    padding-left: 6ex;
    visibility: hidden;
}

Untuk Daftar Tautan

Jawaban lain memberikan beberapa cara yang baik untuk menambahkan jeda baris, tergantung pada situasinya. Tetapi harus dicatat bahwa :afterpemilih adalah salah satu cara yang lebih baik untuk melakukan ini untuk kontrol CSS atas daftar tautan (dan hal-hal serupa), untuk alasan yang disebutkan di bawah ini.

Berikut ini sebuah contoh, dengan asumsi daftar isi:

<style type="text/css">
    .toc a:after{ content: "\a"; white-space: pre; }
</style>

<span class="toc">
    <a href="#a1">Item A1</a> <a href="#a2">Item A2</a>
    <a href="#b1">Item B1</a> <a href="#b2">Item B2</a>
</span>

Dan inilah teknik Simon_Weaver, yang lebih sederhana dan lebih kompatibel. Itu tidak memisahkan gaya dan konten sebanyak, membutuhkan lebih banyak kode, dan mungkin ada kasus di mana Anda ingin menambahkan jeda setelah fakta. Masih merupakan solusi yang hebat, terutama untuk IE yang lebih lama.

<style type="text/css">
    .toc br{ display: none; } /* comment out for horizontal links */
</style>

<span class="toc">
    <a href="#a1">Item A1</a><br/> <a href="#a2">Item A2</a><br/>
    <a href="#b1">Item B1</a><br/> <a href="#b2">Item B2</a><br/>
</span>

Perhatikan keuntungan dari solusi di atas:

• Tidak peduli spasi putih dalam HTML, hasilnya tetap sama (vs. pre )
• Tidak ada bantalan tambahan ditambahkan ke elemen (lihat NickG's display:block komentar )
• Anda dapat dengan mudah beralih antara daftar tautan horisontal dan vertikal dengan beberapa CSS bersama tanpa masuk ke setiap file HTML untuk perubahan gaya
• Tidak floatatauclear gaya yang memengaruhi konten di sekitarnya
• Gaya terpisah dari konten (vs. <br/>, ataupre dengan jeda kode-keras)
• Ini juga bisa berfungsi untuk tautan lepas menggunakan a.toc:afterdan<a class="toc">
• Anda dapat menambahkan beberapa jeda dan bahkan teks awalan / akhiran

Mungkin seseorang akan memiliki masalah yang sama dengan saya:

Saya berada di elemen dengan display: flexjadi saya harus menggunakan flex-direction: column.

Mengatur brtag kedisplay: none sangat membantu, tetapi kemudian Anda bisa berakhir dengan WordsRunTogether. Saya merasa lebih bermanfaat untuk menggantikannya dengan karakter spasi, seperti:

HTML:

<h1>
    Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>

CSS:

@media (min-device-width: 1281px){
    h1 br {content: ' ';}
    h1 br:after {content: ' ';}
}

Bagaimana dengan <pre>tag?

sumber: http://www.w3schools.com/tags/tag_pre.asp

Anda dapat menambahkan banyak padding dan memaksa teks untuk dibagi ke baris baru, misalnya

p{
    padding-right: 50%;
}

Bekerja dengan baik untuk saya dalam situasi dengan desain responsif, di mana hanya dalam rentang lebar tertentu diperlukan teks untuk dipisah.

Saya suka solusi yang sangat sederhana, ini dia satu lagi

<p>hello <span>How are you</span></p>

dan css

p {
 display: flex;
 flex-direction: column;
}

Gunakan overflow-wrap: break-word; Suka :

.yourelement{
overflow-wrap: break-word;
}

Anda perlu mendeklarasikan konten di dalamnya <span class="class_name"></span>. Setelah itu garis akan terputus.

\A berarti karakter umpan baris.

.class_name::after {
  content: "\A";
  white-space: pre;
}

Baik jawaban Vincent Robert dan Joey Adams valid. Jika Anda tidak ingin, bagaimanapun, ubah markup, Anda bisa menyisipkan<br /> menggunakan javascript.

Tidak ada cara untuk melakukannya dalam CSS tanpa mengubah markup.

Dalam kasus saya, saya perlu tombol input untuk memiliki jeda baris sebelum itu.
Saya menerapkan gaya berikut ke tombol dan itu berhasil:

clear:both;

Dalam hal ini membantu seseorang ...

Anda bisa melakukan ini:

<p>This is an <a class="on-new-line">inline link</a>?</p>

Dengan css ini:

a.on-new-line:before { 
  content: ' '; 
  font-size:0; 
  display:block;
  line-height:0;
}

Menggunakan  bukannya spasi akan mencegah istirahat.

<span>I&nbsp;DONT&nbsp;WANT&nbsp;TO&nbsp;BREAK&nbsp;THIS&nbsp;LINE&nbsp;UP, but this text can be on any line.</span>

Ini berfungsi di Chrome:

p::after {
    content: "-";
    color: transparent;
    display: block;
}

Saya kira Anda tidak ingin menggunakan breakpoint karena itu akan selalu melanggar batas. Apakah itu benar? Jika demikian, bagaimana dengan menambahkan breakpoint <br />dalam teks Anda, kemudian berikan kelas seperti <br class="hidebreak"/>kemudian menggunakan kueri media tepat di atas ukuran yang Anda inginkan untuk istirahat untuk menyembunyikan<br /> sehingga pecah pada lebar tertentu tetapi tetap sejajar di atas lebar itu.

HTML:

<p>
The below line breaks at 766px.
</p>

<p>
 This is the line of text<br class="hidebreak"> I want to break.
</p>

CSS:

@media (min-width: 767px) {
  br.hidebreak {display:none;}
}

https://jsfiddle.net/517Design/o71yw5vd/

Kodenya bisa

<div class="text-class"><span>hello</span><span>How are you</span></div>

CSS akan menjadi

.text-class {
     display: flex;
     justify-content: flex-start;
     flex-direction: column;
     align-items: center;
 }

Jangan. Jika Anda ingin garis keras, gunakan satu.