สามารถเพิ่มตัวแบ่งบรรทัดในองค์ประกอบ HTML โดยไม่ต้องใช้การส่งคืนตัวแบ่ง <br> โดยใช้องค์ประกอบหลอก องค์ประกอบหลอกใช้เพื่อจัดรูปแบบส่วนเฉพาะขององค์ประกอบ เราจะใช้ ::after เพื่อกำหนดรูปแบบองค์ประกอบ HTML เพื่อเพิ่มตัวแบ่งบรรทัด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS ::after With \a</title>
</head>
<style>
span {
padding: 1px 8px;
}
span::after {
content: '\a';
white-space: pre;
}
</style>
<body>
<div>
<span>Dumbledore</span>
<span>McGonagall</span>
<span>Snape</span>
<span>Trelawney</span>
</div>
</body>
</html>
ในโค้ดด้านบน เราใช้ pseudo-element ::after ในแต่ละองค์ประกอบอินไลน์ (แสดงโดย span) เพื่อเพิ่มการขึ้นบรรทัดใหม่ (แสดงโดย "\a") หลังบรรทัดข้อความของ span ::after ในกรณีนี้จะมีคุณสมบัติของเนื้อหาและคุณสมบัติพื้นที่ว่างที่เราสามารถใช้ได้
คุณสมบัติ 'เนื้อหา' อธิบายสิ่งที่เราต้องการแทรกเข้าไปในช่วง คุณสมบัติ white-space บอกเราว่าเราต้องการรักษา whitespace หรือไม่ การปิดคุณสมบัติเฉพาะนี้จะไม่รบกวนลักษณะบล็อกอินไลน์ของช่วง ดังนั้นเราต้องเพิ่มคุณสมบัติเฉพาะนี้เพื่อแทนที่สิ่งนั้น
ในขณะที่คุณยุ่งกับการจัดสไตล์และเลย์เอาต์มากขึ้นเรื่อยๆ คุณอาจพบว่าวิธีแก้ปัญหาข้างต้นไม่จำเป็นต้องเป็นทางออกที่ดีที่สุดเสมอไป หากคุณเพิ่มการจัดเรียงและพื้นหลังใด ๆ คุณจะเห็นว่าคุณสมบัติ CSS เหล่านั้นมักจะยุ่งกับที่ที่พื้นหลังเข้ามาเล่น ดูตัวอย่างโค้ดด้านล่างที่แสดงจุด:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Line Break</title>
</head>
<style>
span {
padding: 1px 8px;
background: pink;
}
span::before {
content: "\A";
white-space: pre;
}
</style>
<body>
<div>
<p>Professor <span>Dumbledore</span></p>
<p>Professor <span>McGonagall</span></p>
<p>Professor <span>Snape</span></p>
<p>Professor <span>Trelawney</span></p>
</div>
</body>
</html>
มีวิธีแก้ปัญหาอื่น ๆ ที่ให้ผลลัพธ์ที่คล้ายคลึงกันโดยที่พื้นหลังเริ่มต้นในบรรทัดก่อนหน้าแล้วขึ้นบรรทัดใหม่พร้อมข้อความบนพื้นหลังที่ถูกต้องในบรรทัดถัดไป คุณสมบัติ CSS box decoration break: clone เป็นสิ่งที่อยู่ในความคิดที่สามารถเพิ่มลงในคลาส span ด้านบนเพื่อให้ได้ผลลัพธ์ที่คล้ายคลึงกัน แต่ไม่ได้ให้ผลลัพธ์ที่เราต้องการจริงๆ
การใช้องค์ประกอบระดับบล็อกเช่น <p> หรือ <div> เป็นทางออกที่ดึงดูดใจ แล้วเวลาที่คุณต้องการใช้ค่าแสดงผลอื่นล่ะ สิ่งนี้นำเราไปสู่ตัวเลือกเค้าโครงตาราง
ในโปรแกรมแก้ไขโค้ด ในตัวเลือก CSS ของ span ให้ลบคุณสมบัติที่นั่นและแทนที่ด้วย display:table การใช้สิ่งนี้ไม่เพียงทำให้โค้ดของคุณสะอาดขึ้น แต่ยังให้เลย์เอาต์ที่คุณต้องการในการแสดงข้อมูลอย่างแน่นอน เราไม่ได้ใช้เลย์เอาต์ตารางในความหมายดั้งเดิม แต่มันให้สิ่งที่เราต้องการเพื่อให้งานสำเร็จลุล่วง
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
