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

 p {
  white-space: pre;
 }

<p>hello
How are you</p>

Catatan bahwa ini doesn't bekerja di IE6 atau IE7. Saya don't tahu tentang IE8.

Menggunakan <br/> seperti biasa, tapi menyembunyikannya dengan display: none ketika anda don't ingin.

Aku harapkan sebagian besar orang-orang yang menemukan pertanyaan ini ingin menggunakan css / desain responsif untuk memutuskan apakah atau tidak sebuah line-break muncul di tempat tertentu. (dan don't memiliki sesuatu yang pribadi terhadap <br/>)

Sementara tidak segera jelas, anda dapat benar-benar menerapkan display:none ke <br/> tag untuk menyembunyikannya, yang memungkinkan penggunaan media query di tandem dengan semantic tag BR.

 <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)
    }
 }

Hal ini berguna dalam desain responsif di mana anda perlu untuk memaksa teks ke dalam dua baris yang tepat istirahat.

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

Ada beberapa pilihan untuk menentukan penanganan white spaces dan line breaks. Jika seseorang dapat menempatkan konten dalam misalnya <p> tag itu sangat mudah untuk mendapatkan apa yang diinginkannya.

Untuk melestarikan garis istirahat tapi tidak putih ruang menggunakan pre-line (bukan pra) seperti:

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


<p>hello
How are you</p>

Jika perilaku yang lain adalah ingin memilih di antara salah satu dari ini (WS=Spasi, 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

The "\" perintah di CSS menghasilkan suatu carriage return. Ini adalah CSS, bukan HTML, jadi itu akan menjadi lebih dekat dengan apa yang anda inginkan: tidak ada markup tambahan.

Dalam blockquote, contoh di bawah ini menampilkan judul dan link sumber dan memisahkan dua dengan carriage return ("\"):

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

Pada CSS menggunakan kode

p {
    white-space: pre-line;
}

Dengan ini kode css setiap masukkan dalam tag P akan istirahat-baris pada html.

Bangunan pada apa yang telah dikatakan sebelumnya, ini adalah murni CSS solusi yang bekerja.

  span {
    display: inline;
  }
  span:before {
    content: "\a ";
    white-space: pre;
  }

<p>
  First line of text. <span>Next line.</span>
</p>

Untuk membuat sebuah elemen yang memiliki garis istirahat setelah itu, menetapkan:

display:block;

Non-melayang elemen setelah elemen tingkat blok akan muncul pada baris berikutnya. Banyak elemen, seperti <p> dan <div> sudah block level elemen sehingga anda hanya dapat menggunakan mereka.

Tapi sementara ini baik untuk tahu, ini benar-benar lebih tergantung pada konteks dari konten anda. Dalam contoh anda, anda tidak akan ingin menggunakan CSS untuk memaksa garis istirahat. &Amp;lt;br /> adalah tepat karena semantik tag p adalah yang paling tepat untuk teks anda menampilkan. Lebih markup untuk menggantung CSS dari itu adalah tidak perlu. Secara teknis's tidak persis sebuah paragraf, tetapi tidak ada <ucapan> tag, jadi gunakan apa yang anda miliki. Menggambarkan konten anda dengan baik dengan HTMl adalah cara yang lebih penting - setelah anda memiliki itu maka mencari cara untuk membuatnya terlihat cantik.

Berikut ini's solusi yang buruk untuk yang buruk pertanyaan, tapi satu yang benar-benar memenuhi singkat:

p {
    width : 12ex;
}

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

Untuk Daftar Tautan

Dengan jawaban yang lain memberikan beberapa cara yang baik untuk menambahkan garis istirahat, tergantung pada situasi. Tapi perlu dicatat bahwa :setelah pemilih adalah salah satu cara yang lebih baik untuk melakukan hal ini untuk CSS kontrol atas daftar link (dan hal-hal serupa), untuk alasan yang tercantum di bawah ini.

Berikut ini's contoh, dengan asumsi isi:

    .toc a:after{ content: "\a"; white-space: pre; }


<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 berikut's Simon_Weaver's teknik yang lebih sederhana dan lebih kompatibel. Itu doesn't terpisah gaya dan konten yang lebih banyak, membutuhkan lebih banyak kode, dan mungkin ada kasus di mana anda ingin menambahkan istirahat setelah fakta. Masih sebuah solusi yang bagus, terutama untuk anak YAITU.

    .toc br{ display: none; } /* comment out for horizontal links */


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

Catatan keuntungan dari solusi di atas:

• Tidak peduli spasi dalam HTML, output yang sama (vs. pra)
• Tidak ada tambahan padding menambahkan unsur-unsur (lihat NickG's display:block komentar)
• Anda dapat dengan mudah beralih di antara horisontal dan vertikal daftar link dengan beberapa berbagi CSS tanpa pergi ke setiap file HTML untuk perubahan gaya
• Tidak ada float atau langit gaya yang mempengaruhi sekitarnya konten
• Gaya yang terpisah dari konten (vs. <br/>, atau pra dengan keras-kode istirahat)
• Hal ini juga dapat bekerja untuk link longgar menggunakan a.toc:setelah dan <a class="toc">
• Anda dapat menambahkan beberapa istirahat dan bahkan awalan/akhiran teks

Mungkin seseorang akan memiliki masalah yang sama seperti saya:

Aku berada di sebuah elemen dengan display: flex jadi saya harus menggunakan flex-arah: kolom.

Pengaturan br tag display: none adalah membantu, tapi kemudian anda dapat berakhir dengan WordsRunTogether. I've ternyata lebih bermanfaat untuk bukan menggantinya dengan karakter ruang, 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 tentang<pre> tag?

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

Anda dapat menambahkan banyak dari padding dan gaya teks yang akan dibagi untuk baris baru, misalnya

p{
    padding-right: 50%;
}

Bekerja dengan baik bagi saya dalam situasi dengan desain responsif, di mana hanya berjarak tertentu lebar kisaran itu diperlukan untuk teks yang akan dibagi.

Anda perlu untuk menyatakan isi dalam <span class="class_name"></span>. Setelah itu garis akan istirahat.

\ Berarti karakter line feed.

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

Menggunakan   bukan ruang akan mencegah istirahat.

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

Gunakan meluap-wrap: break-word; seperti :

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

Aku seperti solusi yang sangat sederhana, di sini adalah salah satu yang lebih

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

dan css

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

I'm menebak anda tidak ingin menggunakan breakpoint karena itu akan selalu memecah baris. Apakah itu benar? Jika demikian bagaimana menambahkan breakpoint <br /> dalam teks anda, kemudian memberikan kelas seperti <br class="hidebreak"/> kemudian menggunakan media query tepat di atas ukuran yang anda inginkan untuk istirahat untuk menyembunyikan <br /> sehingga istirahat di tempat tertentu lebar tapi tetap inline di atas yang lebar.

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/