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

ฉันไม่สามารถเข้าถึง HTML หรือ PHP สำหรับเพจและสามารถแก้ไขผ่าน CSS เท่านั้น ฉันได้ทำการแก้ไขบนไซต์และเพิ่มข้อความผ่านอิลิเมนต์::afterหรือ::beforeหลอกและพบว่าควรใช้ Escape Unicode สำหรับสิ่งต่างๆเช่นเว้นวรรคก่อนหรือหลังเนื้อหาที่เพิ่ม

ฉันจะเพิ่มหลายบรรทัดในcontentคุณสมบัติได้อย่างไร

ในตัวอย่างองค์ประกอบเส้นแบ่ง HTML เป็นเพียงการแสดงภาพสิ่งที่ฉันต้องการบรรลุเท่านั้น:

#headerAgentInfoDetailsPhone::after
{
 content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}

contentทรัพย์สินฯ :

ผู้เขียนอาจรวมขึ้นบรรทัดใหม่ในเนื้อหาที่สร้างขึ้นโดยการเขียนลำดับการหลีก "\ A" ในสตริงใดสตริงหนึ่งหลังคุณสมบัติ "content" ตัวแบ่งบรรทัดที่แทรกนี้ยังคงอยู่ภายใต้คุณสมบัติ "เว้นวรรคสีขาว" ดู "สตริง" และ "อักขระและตัวพิมพ์" สำหรับข้อมูลเพิ่มเติมเกี่ยวกับลำดับการหลีก "\ A"

คุณสามารถใช้:

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

http://jsfiddle.net/XkNxs/

อย่างไรก็ตามเมื่อต้องการหลีกเลี่ยงสตริงตามอำเภอใจขอแนะนำให้ใช้\00000aแทน\Aเนื่องจากตัวเลขหรือ[a-f]อักขระใด ๆ ที่ตามด้วยบรรทัดใหม่อาจให้ผลลัพธ์ที่ไม่สามารถคาดเดาได้ :

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}

บทความที่ดีที่อธิบายพื้นฐาน (ไม่ครอบคลุมถึงการแบ่งบรรทัด)

องค์ประกอบ Pseudo Stuff ที่น่าตื่นตาตื่นใจทั้งหมดสามารถทำได้

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

HTML

<h3>
    <span class="label">This is the main label</span>
    <span class="secondary-label">secondary label</span>
</h3>

CSS

.label:after {
    content: '\A';
    white-space: pre;
}

ฉันต้องมีบรรทัดใหม่ในคำแนะนำเครื่องมือ ฉันต้องเพิ่ม CSS นี้ใน: after:

.tooltip:after {
  width: 500px;
  white-space: pre;
  word-wrap: break-word;
}

ดูเหมือนว่าการตัดคำนั้นจำเป็น

นอกจากนี้ \ A ไม่ทำงานตรงกลางข้อความที่จะแสดงเพื่อบังคับให้ขึ้นบรรทัดใหม่

 
 

ทำงาน จากนั้นฉันก็ได้รับคำแนะนำเครื่องมือดังกล่าว:

คุณอาจลองทำเช่นนี้

#headerAgentInfoDetailsPhone
{
    white-space:pre
}
#headerAgentInfoDetailsPhone:after {
    content:"Office: XXXXX \A Mobile: YYYYY ";
}

Js Fiddle

สำหรับคนที่จะมองหา 'วิธีเปลี่ยนเนื้อหาแบบไดนามิกในองค์ประกอบหลอกที่เพิ่มเครื่องหมายบรรทัดใหม่ "นี่คือคำตอบ

ตัวอักษร Html เช่น
จะไม่ทำงานต่อท้าย html โดยใช้ JavaScript เนื่องจากอักขระเหล่านี้มีการเปลี่ยนแปลงในการแสดงเอกสาร

คุณต้องหาตัวแทน Unicode ของอักขระนี้ซึ่งเป็น U + 000D และ U + 000A แทนเพื่อให้เราสามารถทำสิ่งต่างๆเช่น

var el = document.querySelector('div');
var string = el.getAttribute('text').replace(/, /, '\u000D\u000A');
el.setAttribute('text', string);

div:before{
   content: attr(text);
   white-space: pre;
}

<div text='I want to break it in javascript, after comma sign'></div> 

หวังว่านี่จะช่วยประหยัดเวลาได้บ้างโชคดี :)

เพิ่มตัวแบ่งบรรทัด::afterหรือ::beforeเนื้อหาองค์ประกอบหลอก

.yourclass:before {
    content: 'text here first \A  text here second';
    white-space: pre;
}

พบคำถามนี้ที่นี่ซึ่งดูเหมือนจะถามสิ่งเดียวกัน: ลำดับอักขระขึ้นบรรทัดใหม่ในคุณสมบัติ 'เนื้อหา' CSS?

ดูเหมือนว่าคุณสามารถใช้\Aหรือ\00000aเพื่อบรรลุไฟล์newline

<p>Break sentence after the comma,<span class="mbr"> </span>in case of mobile version.</p>
<p>Break sentence after the comma,<span class="dbr"> </span>in case of desktop version.</p>

.mbrและ.dbrเรียนสามารถจำลองพฤติกรรมของเส้นแบ่งใช้ CSS จอแสดงผล: ตาราง มีประโยชน์หากคุณต้องการแทนที่ <br /> จริง

ตรวจสอบการสาธิตนี้ Codepen: https://codepen.io/Marko36/pen/RBweYY ,
และโพสต์นี้ในการใช้งานเว็บไซต์ที่ตอบสนอง: ตอบสนองเส้นแบ่ง: จำลอง <br /> ที่จุดพักให้