ฉันมีข้อความใหญ่ย่อหน้าหนึ่งซึ่งแบ่งออกเป็นย่อหน้าย่อยด้วย<br>:

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

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

ฉันได้พยายามตั้งค่า<br>'s line-heightและheightมีdisplay: blockฉันยัง Googled และกองมากเกิน-ED สั้น ๆ แต่ไม่ได้หาทางแก้ปัญหาใด ๆ สิ่งนี้เป็นไปได้หรือไม่โดยไม่ต้องเปลี่ยนเลย์เอาต์?

css:

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

การแก้ปัญหาอาจไม่เข้ากันข้ามเบราว์เซอร์ แต่เป็นอย่างน้อย พิจารณาการตั้งค่าด้วยline-height:

line-height:22px;

สำหรับ Google Chrome ให้พิจารณาการตั้งค่าcontent:

content: " ";

นอกจากนั้นฉันคิดว่าคุณติดอยู่กับโซลูชัน JavaScript

นี่คือทางออกที่ถูกต้องที่จริงมีการสนับสนุนข้ามเบราว์เซอร์:

  br {
        line-height: 150%;
     }

ดังนั้นการแอบดูด้านบนจึงเป็นคำตอบที่คล้ายกันโดยทั่วไป แต่นี่มันรวบรัดมาก ใช้งานได้ใน Opera, Chrome, Safari & Firefox, IE น่าจะเป็นเช่นกัน?

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

อีกวิธีหนึ่งคือการใช้ทรัพยากรบุคคล แต่และนี่คือส่วนที่มีไหวพริบทำให้มองไม่เห็น

ดังนั้น:

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

เพื่อให้การจำลอง BR สะอาดยิ่งขึ้นโดยใช้ HR: Btw ใช้ได้กับเบราว์เซอร์ทั้งหมด !!

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

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

ฉันเพิ่งมีปัญหานี้และฉันได้รอบโดยใช้

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

คุณสามารถใช้ความสูงบรรทัดกับ<p>องค์ประกอบนั้นได้ดังนั้นเส้นจึงใหญ่ขึ้น

ผมไม่ได้พยายาม:before/ :afterCSS2 หลอกองค์ประกอบก่อนส่วนใหญ่เป็นเพราะได้รับการสนับสนุนเฉพาะใน IE8 (นี้เกี่ยวกับเบราว์เซอร์ IE) นี่อาจเป็นโซลูชัน CSS ที่เป็นไปได้เท่านั้น:

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

นี่คือตัวอย่างในquirksmode

ฉันคิดว่าคุณอาจจะสามารถใช้:

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

แต่นั่นใช้ไม่ได้กับ chrome หรือ firefox

แค่คิดว่าฉันจะพูดถึงว่าในกรณีที่มันเกิดขึ้นกับคนอื่นและฉันจะช่วยให้พวกเขามีปัญหา

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

ทำงานได้ใน Firefox, Chrome & Safari ยังไม่ได้ทดสอบใน Explorer (แท็บเล็ต Windows ไม่มีพลังงาน)

ตัวแบ่งบรรทัดขนาดตัวอักษรทำงานแตกต่างกันใน Firefox และ Safari

ที่น่าสนใจถ้าเขียนแท็กหยุดพักในแบบเต็มรูปแบบดังต่อไปนี้:

<br></br>

ดังนั้นความสูงบรรทัด CSS: 145% ใช้งานได้ หากเขียนแท็กหยุดพักเป็น:

<br> or 
<br/> 

อย่างน้อยก็ใน Chrome, IE และ firefox แปลก!

สิ่งที่ใช้ได้กับฉันคือการเพิ่มอินไลน์ระหว่างแท็กวรรค ... ไม่ใช่วิธีที่ดีที่สุด

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

-------- แก้ไข ---------

ฉันพบปัญหาเกี่ยวกับ PC / Mac ด้วยสิ่งนี้ ... มันให้ข้อความที่ความสูงบรรทัดใหม่ แต่ไม่ได้ทำการแบ่งบรรทัด ... คุณอาจต้องการทดสอบด้วยตัวเอง ขออภัย!

และโปรดจำไว้ว่า (mis) การใช้<hr>แท็กตามที่แนะนำที่ไหนสักแห่งจะสิ้นสุด<p>แท็กดังนั้นลืมเกี่ยวกับโซลูชันนั้น
ถ้า f.ex บางสิ่งมีสไตล์อยู่โดยรอบ<p>สไตล์นั้นจะหายไปหลังจากที่<hr>แทรกเนื้อหาแล้ว

นี่คือโซลูชันที่ใช้งานได้ใน IE, Firefox และ Chrome แนวคิดคือการเพิ่มขนาดตัวอักษรขององค์ประกอบ br จากขนาดร่างกาย 14px เป็น 18px และลดขนาดองค์ประกอบ 4px ลงเพื่อให้ขนาดพิเศษต่ำกว่าบรรทัดข้อความ ผลลัพธ์คือ 4px ของช่องว่างพิเศษใต้ br

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

อัปเดต 13 กันยายน 2019:

ฉันใช้<br class=big>เพื่อแบ่งบรรทัดขนาดใหญ่เมื่อฉันต้องการ จนถึงวันนี้ฉันตั้งชื่อแบบนี้:

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

( vertical-align:topจำเป็นสำหรับ IE และ Edge เท่านั้น)

ที่ทำงานในเบราว์เซอร์หลัก ๆ ทั้งหมดที่ฉันลอง: Chrome, Firefox, Opera, Brave, PaleMoon, Edge และ IE11

อย่างไรก็ตามเมื่อเร็ว ๆ นี้มันหยุดทำงานในเบราว์เซอร์ที่ใช้ Chrome : ตัวแบ่งบรรทัด "ใหญ่" ของฉันกลายเป็นตัวแบ่งบรรทัดขนาดปกติ

(ฉันไม่รู้แน่ชัดว่ามันพังเมื่อวันที่ 12 ก.ย. 2019 มันยังใช้งานได้ใน Chromium Portable 55.0.2883.11 ที่ล้าสมัยของฉัน แต่มันพังใน Opera 63.0.3368.71 และ Chrome 76.0.3809.132 (ทั้ง Windows และ Android))

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

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

หมายเหตุ:

line-height:190% ทำงานได้ทุกอย่างยกเว้นเบราว์เซอร์ที่ใช้ Chrome เวอร์ชันล่าสุด

vertical-align:topเป็นสิ่งจำเป็นสำหรับ IE และ Edge (เมื่อรวมกับline-height:190%) เพื่อให้มีพื้นที่ว่างเพิ่มเติมตามหลังบรรทัดก่อนหน้าซึ่งเป็นเจ้าของแทนที่จะเป็นบางส่วนก่อนและบางส่วนหลัง

display:block;content:"";margin-top:0.5em ใช้งานได้ใน Chrome, Opera & Firefox แต่ไม่ใช่ Edge & IE

ทางเลือก (เรียบง่าย) ทางเลือกในการเพิ่มพื้นที่แนวตั้งเล็กน้อยหลังจาก<br>แท็กหากคุณไม่สนใจที่จะแก้ไข HTML ก็มีลักษณะเช่นนี้ มันทำงานได้ดีในเบราว์เซอร์ทั้งหมด:

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

(แน่นอนคุณสามารถปรับ "-37%" ตามต้องการสำหรับช่องว่างที่ใหญ่ขึ้นหรือเล็กลง) ต่อไปนี้เป็นหน้าตัวอย่างที่มีรูปแบบอื่น ๆ ในชุดรูปแบบ:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html



28 พฤษภาคม 2020:

ฉันได้อัปเดตหน้าตัวอย่างแล้ว มันแสดงให้เห็นถึงเทคนิคข้างต้นทั้งหมด:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

Michael และ yoda นั้นถูกต้องแล้ว สิ่งที่คุณสามารถทำได้คือใช้<p>แท็กซึ่งเป็นแท็กบล็อกใช้ขอบด้านล่างเพื่อชดเชยบล็อกต่อไปนี้ดังนั้นคุณสามารถทำสิ่งที่คล้ายกับสิ่งนี้เพื่อให้ได้ระยะห่างที่กว้างขึ้น:

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

อีกทางเลือกหนึ่งคือการใช้<hr>แท็กบล็อกซึ่งคุณสามารถกำหนดความสูงของระยะห่างได้อย่างชัดเจน

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

คุณสามารถใช้คุณสมบัติ "block-quote" ใน CSS ที่จะทำให้มันไม่ได้มีผลต่อแต่ละบรรทัดของคุณ แต่ช่วยให้คุณสามารถตั้งค่าพารามิเตอร์สำหรับเพียงตัวแบ่งระหว่างย่อหน้าหรือ "บล็อกคำพูด"

UPDATE:
ฉันยืนแก้ไขแล้ว "blockquote" เป็นจริงคุณสมบัติ html คุณใช้มันเหมือนกับ <p> และ </ p> รอบ ๆ งานของคุณ จากนั้นคุณสามารถตั้งค่าพารามิเตอร์สำหรับการอ้างอิงบล็อกของคุณใน CSS เช่น

blockquote { margin-top: 20px }

หวังว่านี่จะช่วยได้ มันคล้ายกับการตั้งค่าพารามิเตอร์ใน br และอาจหรือไม่อาจเข้ากันได้ข้ามเบราว์เซอร์

ดูเหมือนว่าคุณจะไม่สามารถปรับความสูงของ BR แต่คุณสามารถทำให้มันหายไปอย่างน่าเชื่อถือโดยใช้จอแสดงผล: ไม่มี

มาที่หน้านี้ในขณะที่ค้นหาวิธีการแก้ปัญหาต่อไปนี้:

ฉันมีสถานการณ์ที่เกตเวย์การชำระเงินของบุคคลที่สาม (Worldpay) อนุญาตให้คุณกำหนดหน้าการชำระเงินด้วย CSS และ HTML สูงสุด 10k (ไม่อนุญาตให้ใช้สคริปต์) ที่ได้รับการแทรกลงในเนื้อหาของเทมเพลตและหลังจากแท็ก FONT, FONT เป็นต้น . เมื่อรวมกับ DTD ซึ่งบังคับให้ IE7 / 8 เข้าสู่โหมด Quirks สิ่งนี้ทำให้การปรับแต่งข้ามเบราว์เซอร์ทำได้ยากเท่าที่จะเป็นไปได้!

การปิดสาขาของ BR ทำให้สิ่งต่าง ๆ สอดคล้องกันมากขึ้น ...

ฉันใช้วิธีการเหล่านี้ แต่ฉันไม่รู้ว่าข้ามเบราว์เซอร์

================= วิธีที่ 1 ==================

br {
    display:none;
}

หรือ

================= วิธีที่ 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;
}

หรือ

================= วิธีที่ 3 ==================

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

ลองใช้line-heightแอตทริบิวต์CSS บนpแท็กของคุณที่มีbrแท็ก โปรดจำไว้ว่าคุณสามารถแท็กidของคุณpหากคุณต้องการแยกมันแม้ว่ามันจะเป็นการดีกว่าถ้าใช้divสำหรับการแยก IMO

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

ฉันต้องพัฒนาวิธีแก้ปัญหาในการแปลง HTML เป็น PDF และวางแนวข้อความไว้ที่กึ่งกลางของเซลล์ตาราง แต่ไม่มีอะไรทำงานยกเว้นการป้อนข้อความธรรมดา <br>

ดังนั้นเมื่อคิดนอกกรอบฉันได้เปลี่ยนขนาดแนวตั้งโดยปรับขนาดตัวอักษร (เป็น pt)

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

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

คุณต้องทำแบบอินไลน์และในแต่ละ
องค์ประกอบ แต่ควรทำงานบนเบราว์เซอร์ส่วนใหญ่ซอที่มีความสูงบรรทัดเพื่อให้ได้ผลตามที่ต้องการ ถ้าคุณทำให้มันเป็นแบบอินไลน์ในแต่ละองค์ประกอบมันควรจะทำงานกับเบราว์เซอร์และอีเมลส่วนใหญ่ (แต่มันซับซ้อนเกินกว่าที่จะพูดคุยที่นี่)

นี่เป็นเคล็ดลับสำหรับฉันเมื่อฉันไม่สามารถรับสไตล์ระยะห่างจากแท็ก span:

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

ใช้ <div>

<div>Content 1</div>Content 2

ทำให้สามารถขึ้นบรรทัดใหม่ได้โดยไม่ต้องเว้นวรรคแนวตั้ง

สิ่งนี้กลายเป็น

<div>Content 1</div>Content 2

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

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

สำหรับปัญหาเฉพาะฉันกำลังพูดถึงว่าฉันต้องมีช่องว่างเฉพาะระหว่างบรรทัด ฉันเพิ่มระยะขอบไว้ที่ด้านบนและด้านล่าง

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

ฉันได้มันไปทำงานใน IE7 โดยใช้คำสั่งผสมของโซลูชั่น แต่ส่วนใหญ่ห่อ Br ใน DIV ตามที่ไนเจลและคนอื่น ๆ แนะนำ เพิ่มรหัสและเรียกใช้ที่ = "เซิร์ฟเวอร์" ดังนั้นฉันสามารถลบ BR เมื่อลบช่องทำเครื่องหมายออกจากแถวของช่องทำเครื่องหมาย

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

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

อาจใช้แท็ก br สองแท็กเป็นโซลูชันที่ง่ายที่สุดที่ทำงานกับเบราว์เซอร์ทั้งหมด แต่มันซ้ำ ๆ

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

ลองเพิ่มย่อหน้าแทนการแบ่งบรรทัดแบบนี้

bla la la bla bla abla la la bla bla abla ลาลา bla bla a

จากนั้นคุณสามารถระบุ lineheight หรือ padding หรืออะไรก็ได้สำหรับ p นั้น