วิธีแทรกตัวแบ่งบรรทัดก่อนองค์ประกอบโดยใช้ CSS

170

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

#restart:before { content: '<br/>'; }

แต่คุณจะทำอย่างไร

css

— mheavers
แหล่งที่มา

2

CSS ไม่ได้มีไว้สำหรับการเพิ่มหรือแก้ไขเนื้อหามันมีไว้สำหรับควบคุมวิธีการแสดงเนื้อหา

— Todd Moses

40

สำหรับฉันแล้วดูเหมือนว่าเลย์เอาต์และการไหล (การขึ้นบรรทัดใหม่อาจพิจารณาได้เช่นกัน) อยู่ภายในโดเมนของ CSS

— เทรเวอร์

12

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

— เฟยลอเรน

266

เป็นไปได้ที่จะใช้\A escape sequenceในเนื้อหาที่สร้างโดยองค์ประกอบ psuedo อ่านเพิ่มเติมในสเปค CSS2

#restart:before { content: '\A'; }

นอกจากนี้คุณยังอาจต้องเพิ่มการwhite-space:pre;#restart

หมายเหตุ: \Aหมายถึงจุดสิ้นสุดของบรรทัด

ป.ล. รักษาอีกจะเป็น

:before { content: ' '; display: block; }

— bookcasey
แหล่งที่มา

11

ลองใช้พื้นที่สีขาว: ห่อล่วงหน้า; ถ้าคุณต้องการให้ข้อความของคุณห่อ

— Jazzy

6

สุกใส มันควรจะสังเกตว่าสำหรับสิ่งนี้ในการทำงาน - #restartต้องdisplay: inline;

— Troy Alford

23

สิ่งนี้ไม่ได้ผลสำหรับฉันฉันใช้:before { content: ' '; display: block; }แทน

— Bogdanio

1

ด้วยเหตุผลบางอย่างการแก้ปัญหาไม่ทำงานกับinline-blockองค์ประกอบ พวกเขาจะไม่ไปสู่บรรทัดถัดไป ทางออกเดียวคือการเพิ่มที่ว่างเปล่า<div></div>ใน HTML จริง ๆ

— Adam Reis

2

หากบรรทัดไม่หยุดคุณสามารถใช้คุณสมบัติ 'white-space': ก่อนหน้า {content: '\ A'; พื้นที่สีขาว: ก่อน; }

— Amr

35

หาก#restartเป็นองค์ประกอบแบบอินไลน์ (เช่น<span>, <em>ฯลฯ ) แล้วคุณสามารถทำให้มันกลายเป็นบล็อกองค์ประกอบโดยใช้:

#restart { display: block; }

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

ไม่มีวิธีที่จะแทรก CSS บางสิ่งที่ทำหน้าที่เหมือนตัวแบ่งบรรทัดเฉพาะก่อนองค์ประกอบและไม่ใช่หลังจากนั้น คุณอาจทำให้เกิดการแบ่งบรรทัดก่อนเป็นผลข้างเคียงของการเปลี่ยนแปลงอื่น ๆ เช่นfloat: leftหรือclear: leftหลังจากองค์ประกอบที่ลอยอยู่หรือแม้กระทั่งสิ่งที่บ้าเหมือน#restart:before { content: 'a load of non-breaking spaces'; }แต่นี่อาจไม่ใช่ความคิดที่ดีในกรณีทั่วไป

— bobince
แหล่งที่มา

1

มันไม่สามารถแสดงได้: บล็อก - เพราะเมื่อนั้นฉันจะต้องแสดงความกว้างสำหรับองค์ประกอบเพื่อป้องกันไม่ให้พื้นหลังขององค์ประกอบทำงานตลอดทั้งหน้า จะต้องสามารถตั้งค่าความกว้างสำหรับองค์ประกอบได้โดยอัตโนมัติ

— mheavers

3

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

— bobince

สาเหตุที่ทำให้ downvoted บางครั้งนักพัฒนาทำงานในโครงการขนาดใหญ่ที่พวกเขาไม่มีการควบคุมหรือไม่สามารถตัดสินใจที่จะใช้โซลูชันอื่น

— eyurdakul

19

สิ่งนี้ใช้ได้กับฉัน:

#restart:before {
    content: ' ';
    clear: right;
    display: block;
}

— hutorny
แหล่งที่มา

ด้วยเหตุผลบางอย่างอักขระ Unicode ต่าง ๆ สำหรับบรรทัดใหม่ไม่ทำงานสำหรับฉัน .. ? วิธีนี้แก้ปัญหาได้ - ขอบคุณ!

— Gene Bo

1

ใช่ แต่จะเกิดอะไรขึ้นเมื่อคุณต้องใส่ข้อความไว้ในเนื้อหาด้วย! คำตอบ

— Sándor Zuboly

12

เพียงใส่อักขระขึ้นบรรทัดใหม่แบบ Unicode ภายในอิลิเมนต์หลอกก่อน:

#restart:before { content: '\00000A'; }

— Jesse Kinsman
แหล่งที่มา

11

CSS ต่อไปนี้ทำงานสำหรับฉัน:

/* newline before element */
#myelementId:before{
    content:"\a";
    white-space: pre;
}

— rluks
แหล่งที่มา

ความคิดที่ยอดเยี่ยมกับ CSS ธรรมดา

— NaveenDA

ทำงานเป็นเสน่ห์สำหรับฉัน ฉันใช้สิ่งนี้:content: 'bar: \a' attr(data-description);

— Jimmy Adaro

นี่เป็นคำตอบที่ถูกต้อง👍

— cronoklee

10

มีเหตุผลสองประการที่คุณไม่สามารถเพิ่มเนื้อหาที่สร้างผ่าน CSS ในแบบที่คุณต้องการ:

เนื้อหาที่สร้างขึ้นยอมรับเนื้อหาและไม่ใช่มาร์กอัป มาร์กอัปจะไม่ถูกประเมิน แต่แสดงเฉพาะ
:beforeและ:afterเนื้อหาที่สร้างขึ้นจะถูกเพิ่มภายในองค์ประกอบดังนั้นแม้จะเพิ่มช่องว่างหรือตัวอักษรและกำหนดว่ามันblockจะไม่ทำงาน

มี::outsideองค์ประกอบปลอมที่อาจทำในสิ่งที่คุณต้องการ อย่างไรก็ตามดูเหมือนจะไม่มีการสนับสนุนเบราว์เซอร์ (อ่านเพิ่มเติมได้ที่นี่: http://www.w3.org/TR/css3-content/#wrapping )

ทางออกที่ดีที่สุดคือใช้ jQuery ที่นี่:

$('<br />').insertBefore('#restart');

ตัวอย่าง: http://jsfiddle.net/jasongennaro/sJGH9/1/

— เจสันเจนนาโร
แหล่งที่มา

"การใช้ CSS" ฉันพบคำตอบที่คล้ายกับการทำงานของ Jesse Kinsman

— RonnyKnoxville

4

ใช่ทำได้โดยสิ้นเชิง แต่เป็นการแฮ็คทั้งหมด (ผู้คนอาจทำให้คุณดูสกปรกเมื่อเขียนโค้ดดังกล่าว)

นี่คือ HTML:

<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>

นี่คือ CSS:

#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }

นี่คือซอ: http://jsfiddle.net/AprNY/

— hammerbrostime
แหล่งที่มา

+1 สำหรับความคิดสร้างสรรค์ ฉันมีบางอย่างที่ฉันกำลังรวมถึงจากแหล่งภายนอกและไม่สามารถแก้ไข HTML จริง ... นี่ดูเหมือนจะใช้ได้ดี :) ขอบคุณ!

— counterbeing

3

ลองทำสิ่งต่อไปนี้:

#restart::before {
  content: '';
  display: block;
}

— ผู้ใช้งาน
แหล่งที่มา

เคล็ดลับ: เพิ่มความคิดเห็นอย่างน้อยหนึ่งบรรทัดดังนั้นโพสต์ของคุณจะไม่สิ้นสุดใน VLQQ โดยค่าเริ่มต้น

— Deduplicator

1

สมมติว่าคุณต้องการให้ความสูงของบรรทัดเท่ากับ 20 px

  .restart:before { 
     content: 'First Line';
     padding-bottom:20px;
  }
  .restart:after { 
    content: 'Second-line';
    position:absolute;
    top:40px;
  }

— คารีม
แหล่งที่มา

1

ก่อนหน้านี้ฉันไม่มีโชคเลย ทางออกของฉันคือการเพิ่มช่วงกับชั้นเรียนและใส่ตัวแบ่งในช่วง จากนั้นเปลี่ยนคลาสให้แสดง: ไม่มี; หรือแสดง: บล็อกตามต้องการ

HTML

    <div>
         <span class="ItmQty"><br /></span>
         <span class="otherclass">
              <asp:Label ID="QuantityLabel" runat="server" Text="Qty: ">      
              </asp:Label>
         </span>
         <div class="cartqty">
              <asp:TextBox ID="QuantityTextBox" runat="server" Text='<%# Bind("Quantity","{0:#}") %>' Width="50"></asp:TextBox>

         </div>
    </div>

CSS

@media only screen and (min-width: 854px)
{
    .ProjItmQty
    {
        display: block;
        clear: both;
    }
}
@media only screen and (min-width: 1003px)
{
    .ProjItmQty
    {
        display: none;
    }
}

หวังว่านี่จะช่วยได้

— โรเจอร์
แหล่งที่มา

1

คุณสามารถเติมเอกสารของคุณด้วย<br>แท็กและเปิด \ ปิดด้วย CSS เช่นเดียวกับคนอื่น ๆ :

<style>
.hideBreaks {
 display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>

— ทะลุทะลวง
แหล่งที่มา

0

คุณยังสามารถใช้เอนทิตี HTML ที่เข้ารหัสล่วงหน้าสำหรับการขึ้นบรรทัดใหม่
ในเนื้อหาของคุณและมันจะมีผลเหมือนกัน

— เฮนรีกิบสัน
แหล่งที่มา

0

body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }

https://www.w3.org/TR/CSS2/generate.html#x18 Proerty เนื้อหา "newlines" ... p จะไม่เพิ่มระยะขอบหรือการเติมเมื่อสิ้นสุด p ภายในบล็อกหลัก (เช่นเนื้อหา› ส่วน› P) ตัวแบ่งบรรทัด "\ A" บังคับให้มีพื้นที่ว่างในแนวเส้น

— มาร์คสจ๊วต
แหล่งที่มา

-1

เพิ่มไปmargin-top:20px; #restartหรือช่องว่างขนาดใดก็ตามที่คุณรู้สึกว่าเหมาะสม หากเป็นองค์ประกอบแบบอินไลน์คุณจะต้องเพิ่มdisplay:blockหรือdisplay:inline-blockแม้ว่าฉันจะไม่คิดว่าใช้inline-blockงานได้กับ IE เวอร์ชันเก่ากว่า

— punkrockbuddyholly
แหล่งที่มา

ไม่มีปัญหาคือประเภทการแสดงผลขององค์ประกอบเป็นแบบอินไลน์บล็อกดังนั้นฉันต้องหยุดพักก่อนที่องค์ประกอบ

— mheavers

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

— mheavers

คุณไม่สามารถเพิ่มองค์ประกอบ HTML โดยใช้คุณสมบัติเนื้อหาเป็นไปไม่ได้

— punkrockbuddyholly

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

— pdwalker

-1

แทนที่จะเพิ่มตัวแบ่งบรรทัดด้วยตนเองคุณสามารถใช้border-bottom: 1px solid #ff0000ซึ่งจะใช้เส้นขอบขององค์ประกอบและแสดงเฉพาะborder-<side>ด้านใดก็ตามที่คุณระบุ

— andy4thehuynh
แหล่งที่มา

2

OP ขอ equivallent ของไม่ได้<br> <hr>

— Beni Cherniavsky-Paskin