มักจะมีความคิดเห็นและคำอธิบายประกอบในนวนิยายโบราณ เพื่อแยกแยะข้อความหลักและคำอธิบายประกอบ โดยปกติคำอธิบายประกอบจะพิมพ์เป็นรูปแบบสองบรรทัดพร้อมกับความคิดเห็น เรารู้ว่าใน Word
คุณจะต้องเลือกข้อความความคิดเห็นก่อน จากนั้นใช้คำสั่ง "Double Lines into One" ในกลุ่มเครื่องมือปรับขนาดอักขระบนแผง "ย่อหน้า" ของเมนู "Start" เพื่อให้บรรลุ double ได้อย่างง่ายดาย - เอฟเฟกต์การตัดเส้น ดังที่แสดงด้านล่าง:
ดังนั้นจะบรรลุผลดังกล่าวในไฟล์ HTML
ได้อย่างไร?
ใน HTML
มีโครงร่างการแสดงผลที่เรียกว่า flex
ตราบใดที่คุณกำหนดคอนเทนเนอร์ด้วยโครงร่าง flex
องค์ประกอบลูกโดยตรงของคอนเทนเนอร์นี้จะกลายเป็นองค์ประกอบ flex
ดังนั้นจะเป็นการจำลองเอฟเฟกต์แบทช์สองบรรทัดด้านบน รหัสมีดังนี้:
<!DOCTYPE html> <html> <หัว> <title>คำยืดหยุ่น</title> <style type="text/css"> .คอนเทนเนอร์ { จอแสดงผล: ดิ้น; /*ใช้โหมดเค้าโครงดิ้น*/ ทิศทางแบบยืดหยุ่น: row;/*ทิศทางการจัดเรียงองค์ประกอบลูก*/ ปรับเนื้อหา: ซ้าย; /*การจัดตำแหน่งคอนเทนเนอร์*/ align-items: center;/*การจัดตำแหน่งองค์ประกอบย่อย โดยอาศัยสิ่งนี้เป็นหลักเพื่อให้ได้การจัดตำแหน่งข้อความในแนวตั้ง*/ flex-wrap: wrap;/*ใช้คอนเทนเนอร์ Flex แบบหลายบรรทัด*/ - .เนื้อหา{ ขนาดตัวอักษร:1.4em; - .ความคิดเห็น{ ขนาดตัวอักษร:0.5em; - ช่วง{ จอแสดงผล: อินไลน์; - </สไตล์> </หัว> <ร่างกาย> <div class="คอนเทนเนอร์"> <span class="content">เพื่อเตรียมพร้อมสำหรับการเลือกพาเจ้าหญิงและเจ้าหญิงไปโรงเรียน พวกเขาสามารถทำหน้าที่เป็นคนที่มีความสามารถและผู้ใจบุญได้ </span> <span class="comment" style="width:20em;">[Jiaxu Side] ย่อหน้าแห่งการสรรเสริญและยกย่องที่ไม่เคยมีให้เห็นในนวนิยายตลอดยุคสมัย </span> <ช่วง class="content">ประการที่สอง นับตั้งแต่การตายของพ่อของ Xue Pan สำนักงานธุรกิจ ผู้จัดการทั่วไป เสมียน ฯลฯ ในจังหวัดต่างๆ ทั้งหมด เมื่อเห็นว่า Xue Pan ยังเด็กและไม่รู้โลก จึงใช้โอกาสนี้ในการ ลักพาตัวเขาไป ประการที่สอง ตั้งแต่บิดาของเสวี่ยปันเสียชีวิต หลังจากนั้นก็ดำเนินกิจการค้าขายทั้งหมดในแต่ละจังหวัด สำนักงาน ผู้จัดการทั่วไป เสมียน ฯลฯ เมื่อเห็นว่า Xue Pan ยังเด็กและไม่สนใจโลก จึงฉวยโอกาสลักพาตัวเขา ประการที่สอง ตั้งแต่การตายของพ่อของ Xue Pan สำนักงานธุรกิจทั้งหมด ผู้จัดการทั่วไป เสมียน ฯลฯ ในจังหวัดต่าง ๆ เมื่อเห็นว่า Xue Pan ยังเด็กและโง่เขลา รู้จักโลกเขาจึงใช้ประโยชน์จากโอกาสที่จะลักพาตัวเขา</span> <span class="comment" style="width:12em;">【เรียกดู】ฉันร้องไห้ให้กับผู้ก่อตั้ง </span> </div> <div class="คอนเทนเนอร์"> <p class="content">นี่คือข้อความอื่น</p> <p class="comment" style="width:8em;">นี่เป็นความคิดเห็นแบบสองบรรทัด</p> <p class="content">นี่คือข้อความในอีกย่อหน้าหนึ่ง</p> <p class="comment" style="width:6em;">ตัวอย่างการรวมสองแถวเป็นแถวเดียว</p> </div> </ร่างกาย> </html>
หน้าด้านบนจะแสดงดังนี้:
ดังที่เห็นจากภาพด้านบน เค้าโครง flex
ยังคงมีข้อจำกัดอย่างมากเมื่อเทียบกับ Word
ประการแรก เมื่อขนาดขององค์ประกอบย่อยเกินความกว้างหรือความสูงของคอนเทนเนอร์ แม้ว่าจะใช้ flex-wrap: wrap
ก็ตาม ไม่สามารถป้องกันไม่ให้องค์ประกอบมีขนาดใหญ่เกินไป องค์ประกอบย่อยที่แตกต่างกันจะแสดงในบรรทัดใหม่ (แม้ว่าองค์ประกอบย่อยจะเป็น span
องค์ประกอบแบบอินไลน์ก็ตาม) ประการที่สอง สำหรับเนื้อหาทั้งหมดที่ต้องแสดงเป็นสองบรรทัด จำเป็นต้องมีความกว้างที่เหมาะสม จะถูกกำหนดให้กับเนื้อหาแต่ละชิ้น มิฉะนั้นจะไม่มีเอฟเฟกต์การแสดงแบทช์สองบรรทัดในอุดมคติ
ใน HTML
คุณยังสามารถใช้องค์ประกอบ table
เพื่อให้ได้เอฟเฟกต์การคลิปสองแถว แต่จะซับซ้อนกว่าโค้ดเลย์เอาต์ flex
และเอฟเฟกต์ไม่จำเป็นต้องเหมาะสมกว่าเสมอไป ดูเหมือนว่ายังมีหนทางอีกยาวไกลในการตระหนักถึงเอฟเฟกต์แบทช์สองบรรทัดใน HTML
!
นี่เป็นการสรุปบทความนี้เกี่ยวกับการใช้เค้าโครง Flex ใน HTML เพื่อให้เกิดเอฟเฟกต์การแบทช์สองบรรทัด สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการแบทช์ HTML สองบรรทัด โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรือเรียกดูบทความที่เกี่ยวข้องต่อไปนี้ สนับสนุน downcodes.com มากขึ้นในอนาคต!