ไม่สนใจ <br> กับ CSS?

ฉันกำลังทำงานกับไซต์ที่มีการแทรกตัวแบ่งบรรทัดเช่นเดียวกับ<br>ในหัวเรื่องบางส่วน สมมติว่าฉันไม่สามารถแก้ไขซอร์ส HTML ได้มีวิธีใดบ้างที่ CSS ฉันสามารถเพิกเฉยต่อช่วงพักเหล่านี้ได้

ฉันกำลังเพิ่มประสิทธิภาพไซต์บนมือถือดังนั้นฉันจึงไม่ต้องการใช้ JavaScript จริงๆ

ด้วย css คุณสามารถ "ซ่อน" แท็ก br และแท็กเหล่านี้จะไม่มีผล:

br {
    display: none;
}

หากคุณต้องการซ่อนเพียงบางส่วนภายในประเภทหัวเรื่องที่เฉพาะเจาะจงเพียงแค่ทำให้ css ของคุณเฉพาะเจาะจงมากขึ้น

h3 br {
    display: none;
}

หมายเหตุ: โซลูชันนี้ใช้ได้กับเบราว์เซอร์ Webkit เท่านั้นซึ่งใช้องค์ประกอบหลอกกับแท็กปิดตัวเองอย่างไม่ถูกต้อง

ในฐานะที่เป็นภาคผนวกของคำตอบข้างต้นเป็นที่น่าสังเกตว่าในบางกรณีเราจำเป็นต้องใส่ช่องว่างแทนที่จะเพิกเฉย<br>:

ตัวอย่างเช่นคำตอบข้างต้นจะเปลี่ยนไป

Monday<br>05 August

ถึง

Monday05 August

ตามที่ฉันได้ตรวจสอบแล้วในขณะที่พยายามจัดรูปแบบปฏิทินกิจกรรมรายสัปดาห์ ควรเว้นวรรคหลัง "Monday" สามารถทำได้อย่างง่ายดายโดยการแทรกสิ่งต่อไปนี้ใน CSS:

br  {
    content: ' '
}
br:after {
    content: ' '
}

ซึ่งจะทำให้

Monday<br>05 August

ดูเหมือน

Monday 05 August

คุณสามารถเปลี่ยนcontentแอตทริบิวต์ในbr:afterการ', 'ถ้าคุณต้องการที่จะแยกด้วยเครื่องหมายจุลภาคหรือใส่อะไรที่คุณต้องการภายใน' 'ที่จะทำให้มันตัวคั่น! ยังไงซะ

Monday, 05 August

ดูเรียบร้อย ;-)

ดูที่นี่สำหรับการอ้างอิง

ดังคำตอบข้างต้นหากคุณต้องการกำหนดให้เฉพาะแท็กคุณสามารถทำได้ หากคุณต้องการให้พร็อพเพอร์ตี้นี้ทำงานกับแท็ก<h3>เพียงแค่เพิ่มh3แต่ละรายการก่อนbrและbr:afterเช่น

โดยทั่วไปจะใช้ได้กับแท็กหลอก

หากคุณเพิ่มสไตล์

br{
    display: none;
}

จากนั้นจะทำงาน ไม่แน่ใจว่าจะใช้งานได้กับ IE เวอร์ชันเก่าหรือไม่

นี่คือวิธีที่ฉันทำ:

br { 
    display: inline;
    content: ' ';
    clear:none;
}

คุณสามารถใช้spanองค์ประกอบแทนbrถ้าคุณต้องการให้เมธอด white space ทำงานได้เนื่องจากมันขึ้นอยู่กับองค์ประกอบหลอกซึ่ง "ไม่ได้กำหนด" สำหรับองค์ประกอบที่ถูกแทนที่

HTML

<p>
   To break lines<span class="line-break">in a paragraph,</span><span>don't use</span><span>the 'br' element.</span>
</p>

CSS

span {white-space: pre;}

span:after {content: ' ';}

span.line-break {display: block;}

span.line-break:after {content: none;}

การสาธิต

display:blockแบ่งสายจะประสบความสำเร็จเพียงโดยการตั้งค่าองค์ประกอบช่วงที่เหมาะสมในการ

โดยการใช้รหัสและ / หรือการเรียนการสอนมาร์กอัป HTML ของคุณคุณสามารถกำหนดเป้าหมายทุกชุดเดียวหรือช่วงขององค์ประกอบโดย CSS หรือใช้ CSS nth-child()เตอร์เช่น

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

และคุณยังสามารถเพิ่ม / ลบ / สลับคลาสโดย Javascript (jQuery)

"ข้อได้เปรียบ" ของวิธีนี้คือความทนทาน - ใช้ได้กับทุกเบราว์เซอร์ที่รองรับองค์ประกอบหลอก (ดู: ฉันสามารถใช้ - เนื้อหาที่สร้างโดย CSS )

นอกจากนี้ยังเป็นไปได้ที่จะเพิ่มตัวแบ่งบรรทัดผ่านองค์ประกอบหลอก:

span.break:before {  
    content: "\A";
    white-space: pre;
}

การสาธิต

สำหรับฉันดูดีกว่านี้:

Some text, Some text, Some text

br {
  display: inline;
  content: '';
}

br:after {
  content: ', ';
  display: inline-block;
}

<div style="display:block">
  <span>Some text</span>
  <br>
  <span>Some text</span>
  <br>
  <span>Some text</span>
</div>

สำหรับสิ่งนั้นคุณสามารถทำได้ดังนี้:

br{display: none;}

และหากอยู่ในแท็ก PRE คุณสามารถและหากคุณต้องการให้แท็ก PRE ทำงานเหมือนองค์ประกอบบล็อกทั่วไปคุณสามารถใช้ CSS นี้:

pre {white-space: normal;}

หรือคุณสามารถทำตามสไตล์ของAneesh Karthik C เช่น:

br  {content: ' '}
br:after {content: ' '}

ฉันคิดว่าคุณเข้าใจแล้ว

ตามคำถามของคุณในการแก้ปัญหานี้สำหรับ Firefox และ Opera โดยใช้วิธีAneesh Karthik Cคุณต้องเพิ่มแอตทริบิวต์ "float" right "

ตรวจสอบตัวอย่างที่นี่ CSS นี้ใช้ได้ใน Firefox (26.0), Opera (12.15), Chrome (32.0.1700) และ Safari (7.0)

br {
   content: " ";  
   float:right; 
}

หวังว่านี่จะตอบคำถามของคุณได้นะ !!

แม้ว่าคำถามนี้จะได้รับการแก้ไขแล้ว แต่คำตอบที่ยอมรับไม่ได้ช่วยแก้ปัญหาให้ฉันใน Firefox Firefox (และอาจเป็น IE แม้ว่าฉันจะไม่ได้ลอง) ข้ามช่องว่างในขณะที่อ่านเนื้อหาของแท็ก "เนื้อหา" ในขณะที่ฉันเข้าใจอย่างถ่องแท้ว่าทำไม Mozilla ถึงทำเช่นนั้น แต่ก็นำปัญหามาให้ วิธีแก้ปัญหาที่ง่ายที่สุดที่ฉันพบคือใช้ช่องว่างที่ไม่แตกหักแทนช่องว่างปกติดังที่แสดงด้านล่าง

.noLineBreaks br:before{
content: '\a0'
}

ได้ดู .

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

HTML

<h2>

  Where ever you go <br class="break"> i am there.

</h2>

CSS สำหรับมือถือตัวอย่าง

/* Resize the browser window to check */

@media (max-width: 640px) 
{
  .break {display: none;}
}

ตรวจสอบ Codepen นี้:
https://codepen.io/fluidbrush/pen/pojGQyM

คุณสามารถแปลงเป็นความคิดเห็น ..

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

br {
display: none;
}

แต่ถ้าคุณไม่ต้องการทำไมคุณถึงวางไว้ที่นั่น?