çıktı:

Merhaba
Nasılsın

kod:

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

Aynı çıktıyı nasıl elde edebilirim <br>?

Aynı HTML yapısına sahip İmkansız mı ayırt şey olmalı Hellove How are you.

Daha spansonra blok olarak göstereceğiniz s'yi kullanmanızı öneririm (tıpkı bir <div>gerçek gibi ).

p span {
  display: block;
}

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

Yeni satırları koruyan white-space: pre;öğelerin gibi davranmasını sağlamak için kullanabilirsiniz <pre>. Misal:

p {
  white-space: pre;
}

<p>hello 
How are you</p>

IE için bunun yalnızca IE8 + 'da çalıştığını unutmayın.

<br/>Normal olarak kullanın , ancak display: noneistemediğinizde gizleyin .

Bu soruyu bulan çoğu insanın belirli bir yerde satır sonu görünüp görünmeyeceğine karar vermek için css / Responsive design kullanmak istiyor. (ve kişisel bir şeyiniz yok <br/>)

Hemen belirgin olmasa da, aslında display:nonebir <br/>etikete gizlemek için uygulayabilirsiniz , bu da medya sorgularının semantik BR etiketleriyle birlikte kullanılmasını sağlar.

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

Bu, metni kesin bir şekilde iki satıra zorlamanız gereken duyarlı tasarımda kullanışlıdır.

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

Beyaz boşlukların ve satır kesmelerinin işlenmesini tanımlamak için birkaç seçenek vardır. İçeriği örneğin bir <p>etikete koyabilirse, istediği her şeyi elde etmek oldukça kolaydır.

Satır sonlarını korumak, ancak beyaz boşlukları korumak için aşağıdaki gibi kullanın pre-line(değil pre):

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

<p>hello
How are you</p>

Başka bir davranış isteniyorsa, bunlardan birini seçin (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 */

KAYNAK: W3 Okulları

CSS'deki "\ a" komutu bir satır başı oluşturur. Bu HTML değil CSS'dir, bu yüzden istediğiniz şeye daha yakın olacaktır: ekstra işaretleme yok .

Bir blok alıntıda, aşağıdaki örnek hem başlığı hem de kaynak bağlantısını görüntüler ve ikisini bir satır başı ( "\a") ile ayırır :

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

CSS'de kodu kullanın

p {
    white-space: pre-line;
}

Bu kod css ile P etiketi içindeki her giriş html'de bir kesme çizgisi olacaktır.

Daha önce söylenenlere dayanarak, bu işe yarayan saf bir CSS çözümüdür.

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

VEYA

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

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

Bir öğenin daha sonra satır sonu yapmasını sağlamak için öğeyi atayın:

display:block;

Bir blok seviyesi öğesinden sonra kayan elemanlar sonraki satırda görünecektir. <p> ve <div> gibi birçok öğe zaten blok düzeyinde öğelerdir, böylece bunları kullanabilirsiniz.

Ancak bunu bilmek iyi olsa da, bu gerçekten içeriğinizin içeriğine bağlıdır. Örneğin, satır kesmeye zorlamak için CSS kullanmak istemezsiniz. <br /> uygundur, çünkü anlamsal olarak p etiketi görüntülemekte olduğunuz metin için en uygun etikettir. Sadece CSS'yi asmak için daha fazla işaretleme gerekli değildir. Teknik olarak tam olarak bir paragraf değil , ancak <greeting> etiketi yok, bu yüzden sahip olduklarınızı kullanın. İçeriğinizi HTMl ile iyi tanımlamak çok daha önemlidir - buna sahip olduktan sonra nasıl güzel görüneceğini anlayın.

İşte kötü bir soruya kötü bir çözüm, ama kelimenin tam anlamıyla özeti karşılayan bir çözüm:

p {
    width : 12ex;
}

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

Bağlantıların Listesi İçin

Diğer yanıtlar, duruma bağlı olarak satır sonları eklemenin bazı iyi yollarını sunar. Ancak, :afterseçicinin, aşağıda belirtilen nedenlerden dolayı, bağlantı listeleri (ve benzer şeyler) üzerinde CSS kontrolü için bunu yapmanın daha iyi yollarından biri olduğuna dikkat edilmelidir .

İçindekiler tablosunu varsayarak bir örnek:

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

Ve işte Simon_Weaver'ın tekniği, daha basit ve daha uyumlu. Stil ve içeriği o kadar fazla ayırmaz, daha fazla kod gerektirir ve bundan sonra ara vermek istediğiniz durumlar olabilir. Yine de, özellikle eski IE için harika bir çözüm.

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

Yukarıdaki çözümlerin avantajlarına dikkat edin:

• HTML'deki boşluk olursa olsun çıktı aynıdır (vs. pre)
• Elemanlara ekstra dolgu eklenmez (NickG'nin display:blockyorumlarına bakın)
• Stil değişikliği için her HTML dosyasına girmeden paylaşılan bazı CSS'lerle yatay ve dikey bağlantı listeleri arasında kolayca geçiş yapabilirsiniz
• Çevreleyen içeriği etkileyen hayır floatveya clearstiller
• Stil, içerikten ayrıdır ( <br/>veya presabit kodlu kopmalarla)
• Bu ayrıca a.toc:afterve kullanarak gevşek bağlantılar için de kullanılabilir.<a class="toc">
• Birden çok mola ve hatta önek / sonek metni ekleyebilirsiniz

Belki birileri benimle aynı konuya sahip olacak:

Kullanmak display: flexzorunda olduğum bir unsurdaydım flex-direction: column.

brEtiketi ayarlamadisplay: none yardımcı olur, ancak daha sonra WordsRunTogether ile sonuçlanabilir. Bunun yerine bir boşluk karakteriyle değiştirmeyi daha yararlı buldum:

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: ' ';}
}

<pre>Etikete ne dersin ?

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

Çok fazla dolgu ekleyebilir ve metni yeni satıra bölünmeye zorlayabilirsiniz, örneğin

p{
    padding-right: 50%;
}

Duyarlı tasarıma sahip bir durumda benim için iyi çalıştı, sadece belirli bir genişlik aralığında metnin bölünmesi gerekiyordu.

Çok basit çözümleri seviyorum, işte bir tane daha

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

ve css

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

Overflow-wrap kullanın: break-word; sevmek :

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

İçindeki içeriği bildirmeniz gerekiyor <span class="class_name"></span> . Ondan sonra hat kesilecek.

\A satır besleme karakteri anlamına gelir.

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

Vincent Robert ve Joey Adams'ın cevapları geçerlidir. Bununla birlikte, işaretlemeyi değiştirmek istemiyorsanız,<br /> javascript kullanarak .

İşaretlemeyi değiştirmeden CSS'de yapmanın bir yolu yoktur.

Benim durumumda, önce bir satır sonu olması için bir giriş düğmesine ihtiyacım vardı.
Düğmeye aşağıdaki stili uyguladım ve işe yaradı:

clear:both;

Bunun birine yardım etmesi durumunda ...

Bunu yapabilirsin:

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

Bu css ile:

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

 Boşluk yerine kullanmak bir kırılmayı önleyecektir.

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

Chrome'da çalışır:

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

Sanırım bir kesme noktası kullanmak istemediniz çünkü her zaman çizgiyi kıracak. Bu doğru mu? Eğer öyleyse <br />, metninize bir kesme noktası eklemeye ne dersiniz , o zaman ona bir sınıf verin ve <br class="hidebreak"/>ardından medya sorgusunu kullanarak<br /> belirli bir genişlikte ancak bu genişliğin üstünde kalmaya devam edecek verin.

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/

Kod olabilir

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

CSS olurdu

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

Yapma. Sabit satır sonu istiyorsanız, birini kullanın.