เอาท์พุท:

สวัสดี
คุณเป็นอย่างไร

รหัส:

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

วิธีการบรรลุผลเดียวกันโดยไม่<br>?

เป็นไปไม่ได้ที่มีโครงสร้าง HTML เดียวกันคุณต้องมีบางสิ่งบางอย่างที่จะแยกแยะระหว่างและHelloHow are you

ฉันขอแนะนำให้ใช้spans ที่คุณจะแสดงเป็นบล็อก (เหมือน<div>จริง)

p span {
  display: block;
}

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

คุณสามารถใช้white-space: pre;เพื่อทำให้องค์ประกอบทำหน้าที่เหมือน<pre>กันซึ่งรักษาบรรทัดใหม่ไว้ ตัวอย่าง:

p {
  white-space: pre;
}

<p>hello 
How are you</p>

หมายเหตุสำหรับ IE ที่ใช้งานได้กับ IE8 + เท่านั้น

ใช้<br/>ตามปกติ แต่ซ่อนไว้display: noneเมื่อคุณไม่ต้องการ

ฉันคาดหวังว่าคนส่วนใหญ่ที่พบคำถามนี้ต้องการใช้การออกแบบ css / responsive เพื่อตัดสินใจว่าจะมีการขึ้นบรรทัดใหม่หรือไม่ในบางสถานที่ (และไม่มีอะไรเป็นส่วนตัวกับ<br/>)

แม้ว่าจะไม่ชัดเจนในทันทีคุณสามารถนำdisplay:noneไปใช้กับ<br/>แท็กเพื่อซ่อนมันได้ซึ่งทำให้สามารถใช้การสืบค้นสื่อแบบควบคู่ควบคู่กับ semantic sem tags

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

สิ่งนี้มีประโยชน์ในการออกแบบที่ตอบสนองซึ่งคุณต้องบังคับให้ข้อความเป็นสองบรรทัดในช่วงพักที่แน่นอน

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

มีหลายตัวเลือกสำหรับกำหนดการจัดการพื้นที่สีขาวและตัวแบ่งบรรทัด ถ้ามีใครสามารถใส่เนื้อหาลงใน<p>แท็กได้มันก็ง่ายที่จะได้สิ่งที่ต้องการ

สำหรับรักษาเส้นแบ่ง แต่ไม่ใช้ช่องว่างสีขาวใช้pre-line(ไม่pre) เหมือนใน:

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

<p>hello
How are you</p>

หากต้องการพฤติกรรมอื่นให้เลือกหนึ่งในเหล่านี้ (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 */

แหล่งที่มา: โรงเรียน W3

"\ เป็น"คำสั่งใน CSS สร้างผลตอบแทนการขนส่ง นี่คือ CSS ไม่ใช่ HTML ดังนั้นมันจะเข้าใกล้สิ่งที่คุณต้องการมากขึ้น: ไม่มีมาร์กอัปพิเศษไม่มีมาร์กอัปพิเศษ

ใน blockquote ตัวอย่างด้านล่างแสดงทั้งชื่อและลิงค์แหล่งข้อมูลและแยกทั้งสองอย่างด้วย carriage return ( "\a"):

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

ที่ CSS ใช้รหัส

p {
    white-space: pre-line;
}

ด้วยรหัสนี้ css ทุก ๆ การป้อนภายในแท็ก P จะเป็นตัวแบ่งบรรทัดที่ html

ต่อจากสิ่งที่เคยกล่าวมานี้เป็นโซลูชัน CSS ที่ใช้งานได้จริง

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

หรือ

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

แหล่งที่มา: https://stackoverflow.com/a/36191199/2377343

ในการทำให้องค์ประกอบมีตัวแบ่งบรรทัดหลังจากนั้นให้กำหนด:

display:block;

องค์ประกอบที่ไม่ลอยหลังจากองค์ประกอบระดับบล็อกจะปรากฏในบรรทัดถัดไป องค์ประกอบหลายอย่างเช่น <p> และ <div> เป็นองค์ประกอบระดับบล็อกอยู่แล้วดังนั้นคุณจึงสามารถใช้องค์ประกอบเหล่านั้นได้

แต่ในขณะนี้เป็นการดีที่จะรู้จริง ๆ แล้วมันขึ้นอยู่กับบริบทของเนื้อหาของคุณ ในตัวอย่างของคุณคุณไม่ต้องการใช้ CSS เพื่อบังคับให้มีการขึ้นบรรทัดใหม่ <br /> เหมาะสมเพราะความหมายของแท็ก p นั้นเหมาะสมที่สุดสำหรับข้อความที่คุณกำลังแสดง มาร์กอัปเพิ่มเติมเพียงเพื่อวาง CSS มันไม่จำเป็น ในทางเทคนิคมันไม่ตรงย่อหน้า แต่ไม่มี <ทักทาย> แท็กเพื่อใช้สิ่งที่คุณมี การอธิบายเนื้อหาของคุณให้ดีด้วย HTMl นั้นมีความสำคัญมากขึ้นหลังจากที่คุณมีแล้วลองหาวิธีทำให้มันดูสวย

ต่อไปนี้เป็นวิธีแก้ปัญหาที่ไม่ดีสำหรับคำถามที่ไม่ดี แต่มีคำตอบที่ตรงตามตัวอักษร:

p {
    width : 12ex;
}

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

สำหรับรายการลิงค์

คำตอบอื่น ๆ ให้วิธีที่ดีในการเพิ่มตัวแบ่งบรรทัดขึ้นอยู่กับสถานการณ์ แต่ควรสังเกตว่า:afterตัวเลือกเป็นหนึ่งในวิธีที่ดีกว่าในการทำเช่นนี้เพื่อควบคุม CSS รายการลิงก์ (และสิ่งที่คล้ายกัน) ด้วยเหตุผลที่ระบุไว้ด้านล่าง

นี่คือตัวอย่างสมมติว่าสารบัญ:

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

และนี่คือเทคนิคของ Simon_Weaver ซึ่งง่ายกว่าและเข้ากันได้มากกว่า มันไม่ได้แยกสไตล์และเนื้อหาออกมามากต้องใช้โค้ดมากขึ้นและอาจมีบางกรณีที่คุณต้องการเพิ่มตัวแบ่งหลังจากข้อเท็จจริง ยังคงเป็นทางออกที่ดีโดยเฉพาะสำหรับ IE รุ่นเก่า

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

บันทึกข้อดีของการแก้ปัญหาข้างต้น:

• ไม่ว่าจะเป็นช่องว่างใน HTML ผลลัพธ์จะเหมือนกัน (เทียบกับpre)
• ไม่มีการเพิ่มส่วนเสริมเข้าไปในองค์ประกอบ (ดูdisplay:blockความคิดเห็นของ NickG )
• คุณสามารถสลับระหว่างรายการลิงก์ในแนวนอนและแนวตั้งด้วย CSS ที่ใช้ร่วมกันโดยไม่ต้องเปลี่ยนไฟล์ HTML ทุกไฟล์เพื่อเปลี่ยนสไตล์
• ไม่มีfloatหรือclearรูปแบบที่มีผลต่อเนื้อหาโดยรอบ
• สไตล์นี้แยกจากเนื้อหา (เทียบกับ<br/>หรือpreตัวแบ่งแบบตายตัว)
• นอกจากนี้ยังสามารถทำงานกับลิงก์ที่หลวมโดยใช้a.toc:afterและ<a class="toc">
• คุณสามารถเพิ่มตัวแบ่งหลายและแม้กระทั่งคำนำหน้า / ข้อความต่อท้าย

อาจมีบางคนมีปัญหาแบบเดียวกันกับฉัน:

ผมอยู่ในองค์ประกอบที่มีเพื่อให้ฉันได้ใช้display: flexflex-direction: column

การตั้งค่าbrแท็กเป็นdisplay: noneเป็นประโยชน์ แต่จากนั้นคุณสามารถจบด้วย WordsRunTogether ฉันพบว่ามีประโยชน์มากกว่าแทนที่จะแทนที่ด้วยอักขระเว้นวรรคเช่น:

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>แท็ก?

แหล่งที่มา: http://www.w3schools.com/tags/tag_pre.asp

คุณสามารถเพิ่มช่องว่างภายในจำนวนมากและบังคับให้ข้อความแยกเป็นบรรทัดใหม่ตัวอย่างเช่น

p{
    padding-right: 50%;
}

ทำงานได้ดีสำหรับฉันในสถานการณ์ที่มีการออกแบบที่ตอบสนองซึ่งภายในช่วงความกว้างที่กำหนดเท่านั้นจึงจำเป็นต้องแยกข้อความ

ฉันชอบวิธีแก้ปัญหาง่ายๆนี่คืออีกหนึ่ง

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

และ css

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

ใช้คำสั่ง overflow-wrap: break-word; ชอบ :

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

<span class="class_name"></span>คุณจำเป็นต้องประกาศเนื้อหาภายใน หลังจากนั้นเส้นจะถูกทำลาย

\A หมายถึงอักขระตัวดึงข้อมูลบรรทัด

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

ทั้งคำตอบของ Vincent Robert และ Joey Adams นั้นถูกต้อง อย่างไรก็ตามหากคุณไม่ต้องการเปลี่ยนมาร์กอัปคุณสามารถแทรก a<br />จาวาสคริปต์ได้โดยใช้

ไม่มีวิธีที่จะทำใน CSS โดยไม่เปลี่ยนมาร์กอัพ

ในกรณีของฉันฉันต้องการปุ่มอินพุตเพื่อให้มีตัวแบ่งบรรทัดก่อนหน้า
ฉันใช้สไตล์ต่อไปนี้กับปุ่มและใช้งานได้:

clear:both;

ในกรณีนี้จะช่วยให้ใครบางคน ...

คุณสามารถทำได้:

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

ด้วย CSS นี้:

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

การใช้ แทนช่องว่างจะป้องกันการหยุดพัก

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

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

ฉันเดาว่าคุณไม่ต้องการใช้เบรกพอยต์เพราะมันจะทำให้เกิดเส้นแบ่ง ถูกต้องไหม ถ้าอย่างนั้นเกี่ยวกับการเพิ่มเบรกพอยต์<br />ในข้อความของคุณแล้วให้มันเป็นชั้นเช่น<br class="hidebreak"/>นั้นใช้แบบสอบถามสื่อด้านขวาขนาดที่คุณต้องการที่จะทำลายเพื่อซ่อน<br />มันจึงแตกที่ความกว้างที่เฉพาะเจาะจง

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/

รหัสสามารถ

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

CSS จะเป็น

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

อย่า หากคุณต้องการตัวแบ่งบรรทัดที่ยากใช้หนึ่ง