คุณสามารถกำหนดเป้าหมาย <br /> ด้วย css ได้หรือไม่

เป็นไปได้หรือไม่ที่จะกำหนดเป้าหมาย<br/>แท็กline-break ด้วย CSS?

ฉันต้องการเส้นประ 1px ทุกครั้งที่มีเส้นแบ่ง ฉันกำลังปรับแต่งเว็บไซต์ด้วย CSS ของตัวเองและไม่สามารถเปลี่ยนชุด HTML มิฉะนั้นฉันจะใช้วิธีอื่น

ฉันไม่คิดว่ามันเป็นไปได้ แต่อาจมีวิธีที่ใครบางคนรู้

BRสร้างตัวแบ่งบรรทัดและเป็นตัวแบ่งบรรทัดเท่านั้น ในฐานะที่เป็นองค์ประกอบนี้มีเนื้อหาที่ไม่มีกี่รูปแบบเดียวที่ทำให้ความรู้สึกที่จะนำไปใช้บนมันเหมือนหรือclear positionคุณสามารถตั้งค่าBRเส้นขอบของ แต่คุณจะไม่เห็นมันเพราะมันไม่มีมิติภาพ

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

ดูเหมือนว่าได้มีการพูดคุยกันในฟอรัมอื่นแล้ว แยกจากRe: การตั้งค่าความสูงขององค์ประกอบ BR โดยใช้ CSS :

[T] สิ่งที่นำเขาไปสู่สถานะที่ค่อนข้างแปลกสำหรับ BR ในแง่หนึ่งมันไม่ได้รับการปฏิบัติเหมือนเป็นองค์ประกอบปกติ แต่แทนที่จะเป็นตัวอย่างของ \ A ในเนื้อหาที่สร้างขึ้น แต่ในทางกลับกันมันก็ถือว่าเป็น องค์ประกอบปกติในคุณสมบัติ CSS (กลุ่มย่อยที่ จำกัด ) ได้รับอนุญาตให้ใช้งานได้

ฉันยังพบความกระจ่างในสเปคCSS 1 (ไม่มีสเป็คระดับสูงกล่าวถึง):

คุณสมบัติและค่าของ CSS1 ปัจจุบันไม่สามารถอธิบายพฤติกรรมขององค์ประกอบ 'BR' ได้ ใน HTML องค์ประกอบ 'BR' จะระบุการแบ่งบรรทัดระหว่างคำ ในผลองค์ประกอบจะถูกแทนที่ด้วยตัวแบ่งบรรทัด เวอร์ชันในอนาคตของ CSS อาจรองรับเนื้อหาที่เพิ่มและแทนที่ แต่ตัวจัดรูปแบบที่ใช้ CSS1 ต้องปฏิบัติต่อ 'BR' เป็นพิเศษ

การทดสอบของ Grant Wagnerแสดงให้เห็นว่าไม่มีทางที่จะจัดสไตล์BRอย่างที่คุณสามารถทำได้กับองค์ประกอบอื่น ๆ นอกจากนี้ยังมีเว็บไซต์ออนไลน์ที่คุณสามารถทดสอบผลลัพธ์ในเบราว์เซอร์ของคุณ

ปรับปรุง

pelms ทำการตรวจสอบเพิ่มเติมและชี้ให้เห็นว่า IE8 (บน Win7) และ Chrome 2 / Safari 4b ช่วยให้คุณมีสไตล์BRบ้าง และแน่นอนฉันตรวจสอบหน้าตัวอย่างของ IEด้วยเอนจิ้น IE8 ของ IE Net Rendererและใช้งานได้

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

ลองต่อไปนี้ฉันรวบรวมมันโดยใช้ Update 2 จากคำตอบอื่นด้วยคะแนนโหวตสูงและทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน:

br
{   content: "A" !important;
    display: block !important;
    margin-bottom: 1.5em !important;
}

มีเหตุผลหนึ่งที่คุณควรกำหนด<br>แท็ก

เมื่อเป็นส่วนหนึ่งของรหัสคุณไม่ต้องการเปลี่ยน (หรือไม่สามารถ) และคุณต้องการให้<br>ไม่แสดง

.xxx br {display:none}

สามารถประหยัดเวลาได้มากและบางครั้งก็เป็นวันของคุณ

เพื่อประโยชน์ของผู้เยี่ยมชมในอนาคตที่อาจพลาดความเห็นของฉัน:

br {
    border-bottom:1px dashed black;
}

ไม่ทำงาน, ไม่เป็นผล.

มันได้รับการทดสอบใน IE 6, 7 & 8, Firefox 2, 3 & 3.5B4, Safari 3 & 4 สำหรับ Windows, Opera 9.6 & 10 (alpha) และ Google Chrome (รุ่น 2) และมันไม่ทำงานในสิ่งใด ๆ พวกเขา หากถึงจุดหนึ่งในอนาคตบางคนจะพบเบราว์เซอร์ที่รองรับขอบบน<br>องค์ประกอบโปรดอัปเดตรายการนี้

โปรดทราบด้วยว่าฉันได้ลองทำหลายอย่างแล้ว:

br {
    border-bottom:1px dashed black;
    display:block;
}

br:before { /* and :after */
    border-bottom:1px dashed black;
    /* content and display added as per porneL's comment */
    content: "";
    display: block;
}

br { /* and :before and :after */
    content: url(a_dashed_line_image);
}

สิ่งเหล่านี้ทำงานได้ใน Opera 9.6 และ 10 (อัลฟา) (ขอบคุณ porneL!):

br:after {
    border-bottom:1px dashed black;
    content: "";
    display: block;
}

ไม่ได้มีประโยชน์มากนักเมื่อมันรองรับเฉพาะในเบราว์เซอร์เดียว แต่ฉันมักจะพบว่ามันน่าสนใจเพื่อดูว่าเบราว์เซอร์ที่แตกต่างกันใช้ข้อมูลจำเพาะ

ฉันรู้ว่าคุณไม่สามารถแก้ไข HTML แต่ถ้าคุณสามารถแก้ไข CSS ได้คุณสามารถเพิ่ม javascript ได้หรือไม่

ถ้าเป็นเช่นนั้นคุณสามารถรวม jquery แล้วคุณสามารถทำได้

<script language="javascript">
$(document).ready(function() {
    $('br').append('<span class="myclass"></span>');
});
</script>

br { padding: 1px 8px; border-bottom: 1px dashed #000 }

วาทกรรมดังต่อไปนี้ใน IE8 ... ไม่ค่อยมีการใช้งานในเบราว์เซอร์เพียงอันเดียว

(NB ฉันใช้ IE 8.0.7100 (บน Win7 RC) หากนั่นสร้างความแตกต่าง)

นอกจากนี้

br:after { content: "..." }  
br { content: "" }`

หรือ,

br:after {
    border: 1px none black;
    border-bottom-style: dashed;
    content: "";
    padding: 0 6px 0;
}

br { content: "" }

ให้เส้นประใน Chrome 2 / Safari 4b แต่จะเสียการแตกบรรทัดซึ่ง (ยกเว้นใครก็ตามที่สามารถหาวิธีนำมันกลับมาใช้ใหม่ได้) ทำให้มันน้อยกว่าไร้ประโยชน์

เช่น
การทดสอบ IE8 , Chrome / ทดสอบ Safariและอื่น

การทดสอบของฉันเองแสดงให้เห็นอย่างชัดเจนว่าbrแท็กไม่ต้องการถูกกำหนดเป้าหมายสำหรับ css

แต่ถ้าคุณสามารถเพิ่มสไตล์คุณสามารถเพิ่มแท็ก scrip ลงในส่วนหัวของหน้าได้หรือไม่ ลิงก์ไปยังภายนอก.jsที่ทำสิ่งนี้:

function replaceLineBreaksWithHorizontalRulesInElement( element )
{
    elems = element.getElementsByTagName( 'br' );
    for ( var i = 0; i < elems.length; i ++ )
    {
        br = elems.item( i );
        hr = document.createElement( 'hr' );
        br.parentNode.replaceChild( hr, br );
    }
}

ในระยะสั้นมันไม่ได้ดีที่สุด แต่นี่คือทางออกของฉัน

ดูเหมือนว่าจะแก้ปัญหาได้:

<!DOCTYPE html>

<style type="text/css">
#someContainer br { display:none }
#someContainer br + a:before { content:"|"; color: transparent; letter-spacing:-100px; border-left: 1px dashed black; margin:0 5px; }
</style>

<div id="someContainer"><a>link</a><br /><a>link</a><br /><a>link</a></div>

BR เป็นองค์ประกอบแบบอินไลน์ไม่ใช่องค์ประกอบของบล็อก

ดังนั้นคุณต้อง:

 br.Underline{
    border-bottom:1px dashed black;
    display: block;
  }

มิฉะนั้นเบราว์เซอร์ที่มีตัวเลือกน้อยเกี่ยวกับสิ่งนั้นจะปฏิเสธที่จะใช้เส้นขอบกับองค์ประกอบ BR ของคุณเนื่องจากองค์ประกอบแบบอินไลน์ไม่มีเส้นขอบช่องว่างภายในหรือระยะขอบ

ปรับปรุง 9/13/2019:

จุดประสงค์ของการออกแบบ<br>แท็กเช่นนี้คือการทำให้เส้นแบ่ง "ใหญ่กว่า" (กล่าวคือมีช่องว่างเพิ่มขึ้นเล็กน้อยระหว่างเส้น)

คลาส "oldbig" (ด้านล่าง) ได้รับการทดสอบและทำงานอย่างถูกต้องใน Chrome 66.0.3359.181, Firefox Quantum 60.0.2, Edge 42.17134.1.0 และ IE 11.48.17134.0 ตามสไตล์ น่าเสียดายที่ Chrome เวอร์ชัน 76 หยุดชะงักและมีอนุพันธ์ (ประมาณสิงหาคม 2562) อาการคือว่าไม่มีการแสดงช่องว่างพิเศษระหว่างบรรทัดอีกต่อไป

คลาส "newbig" ได้รับการทดสอบและทำงานอย่างถูกต้องใน Chrome รุ่นปัจจุบัน (76.0.3809.132), Opera, Firefox, Edge, IE, Brave และ Palemoon:

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

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

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

<p style="max-width:20em">This is a paragraph which demonstrates the difference 
 between a line-break which occurs when the text exceeds the max-width, and a 
 line-break forced by a &lt;br&gt; tag here:<br>
 and a line break forced by a &lt;br class=oldbig&gt; tag here:<br class=oldbig>
 and a line break forced by a &lt;br class=newbig&gt; tag here:<br class=newbig>
 This is the next line after the &lt;br class=newbig&gt; tag (but still 
 part of the same paragraph).</p>
<p style="max-width:20em">And this is another paragraph, entirely.</p>

นี่คือผลลัพธ์ที่แสดงใน Chrome v.76:

สิ่งนี้จะใช้ได้ แต่เฉพาะใน IE ฉันทดสอบใน IE8

br {

  border-bottom: 1px dashed #000000;
  background-color: #ffffff;
  display: block;
  }

ฉันวาง<br>แท็กลงใน<span>แท็กและสามารถใช้display:none;บน<span>เพื่อควบคุมได้เมื่อไม่ใช้<br>แท็กโดยใช้ Media Queries

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

br{
    content: '.';
    display: inline-block;
    width: 100%;
    border-bottom: 1px dashed black;
}

ด้วยการแก้ไขนี้คุณยังสามารถลบ BR บนเว็บไซต์ (เพียงตั้งความกว้างเป็น 0px)

ทำไมไม่ใช้แค่แท็ก HR? มันถูกสร้างขึ้นมาเพื่อสิ่งที่คุณต้องการ ค่อนข้างชอบที่จะทำส้อมทานซุปเมื่อมีช้อนอยู่ตรงหน้าคุณบนโต๊ะ