เครื่องมือแก้ไข Downcodes จะแสดงให้คุณเห็นถึงวิธีการสร้างเอฟเฟกต์การจัดตำแหน่งแบบสองด้านที่คล้ายกับของ Word ใน CSS! สำหรับข้อความที่ผสมภาษาจีนและอังกฤษ จะทำให้ข้อความดูสวยงามและอ่านง่ายขึ้นได้อย่างไร บทความนี้จะอธิบายรายละเอียดวิธีใช้แอตทริบิวต์ CSS `text-align: justify;` และองค์ประกอบหลอก `::after` เพื่อให้เกิดการจัดตำแหน่งที่ปลายทั้งสองข้าง นอกจากนี้ จะมีการพูดคุยเชิงลึกเกี่ยวกับการจัดตำแหน่งบรรทัดสุดท้ายด้วย และกลยุทธ์การเพิ่มประสิทธิภาพ และมาพร้อมกับคำตอบสำหรับคำถามที่พบบ่อยเพื่อช่วยให้คุณผ่อนคลาย
เพื่อให้การจัดตำแหน่งสองด้านใน CSS คล้ายกับ Word (นั่นคือ จัดตำแหน่งด้านซ้ายและด้านขวาให้เท่ากัน) สำหรับข้อความผสมภาษาจีนและอังกฤษ ขั้นตอนสำคัญ ได้แก่ การใช้ text-align: justify แอตทริบิวต์ และการใช้องค์ประกอบหลอก:: หลังจากบังคับจุดสิ้นสุดของข้อความ การประมวลผลประเภทนี้ไม่เพียงทำให้ข้อความดูสวยงามยิ่งขึ้น แต่ยังปรับปรุงความสามารถในการอ่านข้อความอีกด้วย
การใช้ text-align: justify; เป็นวิธีที่ตรงที่สุด คุณลักษณะนี้สามารถจัดแนวข้อความทั้งสองด้านได้ แต่บรรทัดสุดท้ายจะจัดชิดซ้ายตามค่าเริ่มต้น ซึ่งไม่ตรงกับความต้องการของเรา เพื่อจัดแนวบรรทัดสุดท้ายทั้งสองด้าน เราสามารถใช้ ::after pseudo-element ด้วยการเพิ่มองค์ประกอบเสมือนที่มองไม่เห็นลงในที่เก็บข้อความและตั้งค่าความกว้างเป็น 100% คุณสามารถบังคับบรรทัดสุดท้ายของข้อความให้ชิดขอบได้เหมือนกับบรรทัดอื่นๆ
การจัดแนวข้อความเป็นสิ่งสำคัญในการออกแบบเว็บไซต์ และ CSS มีคุณสมบัติที่หลากหลายเพื่อควบคุมการจัดแนวข้อความ ในหมู่พวกเขา การจัดตำแหน่งข้อความเป็นคุณลักษณะที่ใช้กันมากที่สุดเพื่อให้บรรลุการจัดตำแหน่งข้อความ โดยจะควบคุมการจัดตำแหน่งแนวนอนของข้อความในองค์ประกอบ แอตทริบิวต์ text-align ส่วนใหญ่ประกอบด้วยค่าต่อไปนี้:
left: ข้อความถูกจัดชิดซ้าย ซึ่งเป็นค่าเริ่มต้น ขวา: ข้อความถูกจัดชิดขวา center: ข้อความอยู่ตรงกลาง justify: จัดชิดขอบข้อความทั้งสองด้าน ในสถานการณ์ที่ภาษาจีนและภาษาอังกฤษผสมกัน การใช้แอตทริบิวต์นี้สามารถทำให้ด้านซ้ายและด้านขวาของข้อความดูเหมือนกันได้เพื่อให้ได้เอฟเฟกต์การจัดตำแหน่งที่เหมือน Word ในหน้าเว็บ เทคนิคหลักคือการใช้ text-align: justify; และ ::after pseudo-element ร่วมกัน
การตั้งค่าพื้นฐาน
ขั้นแรก ให้ตั้งค่าแอตทริบิวต์ text-align: justify; ขั้นตอนนี้จะทำให้ข้อความมีการจัดแนวพื้นฐาน
.ข้อความจัดชิดขอบ {
การจัดแนวข้อความ: จัดชิดขอบ;
-
เทคนิคการจัดแนวบรรทัดสุดท้าย
เพื่อแก้ปัญหาการจัดตำแหน่งเริ่มต้นด้านซ้ายของข้อความบรรทัดสุดท้าย คุณสามารถใช้ ::after องค์ประกอบหลอกได้ เพิ่มองค์ประกอบหลอกให้กับองค์ประกอบที่ต้องจัดแนว และตั้งค่าความกว้างเป็น 100% ซึ่งจะบังคับให้บรรทัดสุดท้ายของข้อความจัดแนวที่ปลายทั้งสองข้าง คล้ายกับเอฟเฟกต์ใน Word
.text-จัดชิดขอบ::หลังจาก {
เนื้อหา: '';
จอแสดงผล: อินไลน์บล็อก;
ความกว้าง: 100%;
-
ด้วยวิธีการข้างต้น คุณสามารถบรรลุผลของการจัดแนวปลายทั้งสองด้านของแถวสุดท้ายได้ อย่างไรก็ตาม ควรสังเกตว่าเนื่องจากองค์ประกอบหลอกที่เพิ่มเข้ามาใช้พื้นที่เพิ่มเติม สิ่งนี้อาจนำไปสู่การเปลี่ยนแปลงเค้าโครงบางอย่าง ซึ่งจำเป็นต้องปรับเปลี่ยนตามสถานการณ์เค้าโครงจริง
แม้ว่าการใช้องค์ประกอบหลอก ::after จะสามารถแก้ปัญหาการจัดบรรทัดสุดท้ายได้โดยทั่วไป ในบางกรณี (โดยเฉพาะเมื่อมีข้อความน้อย) ระยะห่างของคำในบรรทัดสุดท้ายอาจใหญ่เกินไปและดูไม่สวยงาม เพื่อหลีกเลี่ยงสถานการณ์นี้ คุณสามารถใช้วิธีการปรับให้เหมาะสมบางวิธีได้
ใช้แอตทริบิวต์ text-align-last
CSS จัดเตรียมแอตทริบิวต์ text-align-last ซึ่งสามารถใช้เพื่อระบุวิธีจัดแนวบรรทัดสุดท้ายหรือเพียงบรรทัดเดียวของข้อความ การตั้งค่า text-align-last: justify; สามารถมีเอฟเฟกต์การปรับให้เหมาะสมได้ โดยเฉพาะในเบราว์เซอร์สมัยใหม่ที่รองรับแอตทริบิวต์นี้
.ข้อความจัดชิดขอบ {
การจัดแนวข้อความ: จัดชิดขอบ;
ข้อความจัดครั้งสุดท้าย: ปรับ;
-
จำกัดความกว้างสูงสุด
สำหรับข้อความที่สั้นกว่า การจำกัดความกว้างสูงสุดของคอนเทนเนอร์อย่างเหมาะสมสามารถลดปัญหาการเว้นวรรคระหว่างคำในบรรทัดสุดท้ายมากเกินไป ดังนั้นในการใช้งานจริง จึงเป็นทางเลือกที่ดีในการปรับความกว้างของคอนเทนเนอร์ให้เหมาะสมตามความยาวและเนื้อหา ของข้อความ
ด้วยวิธีการและเทคนิคข้างต้น คุณสามารถสร้างเอฟเฟกต์การจัดตำแหน่งข้อความผสมภาษาจีนและอังกฤษใน CSS ที่คล้ายกับ Word สิ่งนี้ไม่เพียงปรับปรุงความสวยงามของหน้าเท่านั้น แต่ยังปรับปรุงความสามารถในการอ่านข้อความอีกด้วย ในการใช้งานจริง สามารถเลือกและใช้งานได้อย่างยืดหยุ่นตามความต้องการเฉพาะและเนื้อหาข้อความ
1. จะผสมข้อความใน CSS และให้ได้เอฟเฟกต์การจัดตำแหน่งที่ถูกต้องเหมือนใน Word ได้อย่างไร
เพื่อให้ได้เอฟเฟกต์การสลับข้อความที่จัดชิดขวาใน CSS เช่น Word คุณสามารถใช้แอตทริบิวต์การจัดข้อความได้ วางข้อความที่ต้องจัดแนวภายในองค์ประกอบคอนเทนเนอร์ จากนั้นเพิ่มแอตทริบิวต์ text-align: justify ให้กับองค์ประกอบคอนเทนเนอร์ ซึ่งช่วยให้สามารถจัดแนวข้อความภายในคอนเทนเนอร์ที่ปลายทั้งสองข้างได้ และในขณะเดียวกันก็ได้รับเอฟเฟกต์การจัดตำแหน่งทางขวา อย่างไรก็ตาม ควรสังเกตว่าวิธีนี้เหมาะสำหรับการจัดแนวภาษาอังกฤษหรืออักขระเดี่ยวเท่านั้น และอาจไม่เหมาะสำหรับการเรียงพิมพ์ภาษาจีน
2. มีวิธีอื่นใดในการจัดเรียงภาษาอังกฤษและจีนแบบผสมใน CSS เช่น Word โดยจัดชิดขวาหรือไม่?
นอกเหนือจากการใช้ text-align: justify เพื่อให้สามารถสลับข้อความได้ คุณยังสามารถใช้แอตทริบิวต์ float ของ CSS เพื่อให้ได้เอฟเฟกต์เช่นเดียวกับใน Word แบ่งข้อความที่ต้องจัดแนวออกเป็นองค์ประกอบระดับบล็อกหลายรายการ โดยแต่ละองค์ประกอบระดับบล็อกประกอบด้วยข้อความหนึ่งบรรทัด จากนั้นใช้ float: right เพื่อลอยองค์ประกอบระดับบล็อกเหล่านี้ไปทางขวา เพื่อให้แต่ละบล็อกข้อความถูกจัดเรียงจากทางขวาเพื่อให้เอฟเฟกต์การจัดตำแหน่งทางขวาสมบูรณ์ ควรสังเกตว่าเมื่อใช้วิธีนี้คุณต้องแน่ใจว่าลำดับของบล็อกข้อความนั้นมาจากขวาไปซ้ายนั่นคือจากหลังไปหน้า
3. จะแน่ใจได้อย่างไรว่าข้อความได้รับการจัดแนวอย่างถูกต้องระหว่างบรรทัดต่างๆ เมื่อผสมภาษาจีนและภาษาอังกฤษใน CSS
สำหรับปัญหาการจัดตำแหน่งเมื่อมีการผสมภาษาจีนและภาษาอังกฤษ คุณสามารถใช้แอตทริบิวต์ตัวแบ่งคำ CSS เพื่อให้แน่ใจว่าข้อความได้รับการจัดแนวอย่างถูกต้องระหว่างบรรทัดที่ต่างกัน เมื่อใช้ word-break: break-all กับองค์ประกอบคอนเทนเนอร์ข้อความ จะสามารถตัดข้อความระหว่างคำต่างๆ ได้ตามต้องการ ซึ่งจะช่วยแก้ปัญหาการจัดตำแหน่งเมื่อภาษาจีนและภาษาอังกฤษผสมกัน อย่างไรก็ตาม ควรสังเกตว่าการใช้ word-break: break-all อาจทำให้คำยาวๆ บางคำถูกตัดทอน ซึ่งส่งผลต่อประสบการณ์การอ่าน ดังนั้นจึงจำเป็นต้องชั่งน้ำหนัก
ฉันหวังว่าบทความนี้จะช่วยให้คุณเข้าใจและใช้เทคนิคการจัดตำแหน่งข้อความ CSS ได้ดีขึ้น ผู้แก้ไข Downcodes หวังว่าจะได้สำรวจเทคโนโลยีส่วนหน้าเพิ่มเติมกับคุณ!