ข้อความ CSS3รวมคุณสมบัติข้อความเพื่อช่วยแก้ปัญหาการตัดข้อความและการตัดข้อความภายในเนื้อหา

คุณสมบัติ CSS3 สำหรับการจัดรูปแบบข้อความ

1. ตัดแต่งบรรทัดข้อความล้น

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

ไวยากรณ์

P (กว้าง: 300px; ล้น: ซ่อน; ช่องว่างสีขาว: nowrap; ข้อความล้น: จุดไข่ปลา; ) 1. ครอบตัดข้อความโดยใช้คุณสมบัติ text-overflow

2. การใส่ยัติภังค์ภายในคำแบ่งคำ

ใน สถานการณ์ปกติคำจะถูกย้ายไปยังบรรทัดอื่นที่มีการเว้นวรรคหรือยัติภังค์ (" โอนอ่อน") หรือในกรณีที่บังคับถ่ายโอนโดยใช้องค์ประกอบ
- คุณสมบัตินี้ช่วยให้คุณสามารถตั้งค่ากฎการใส่ยัติภังค์ภายในคำตามลำดับ เส้นยาวเต็มพื้นที่ภายในภาชนะจนเต็ม ไม่ใช้กับภาษา CJK (จีน-ญี่ปุ่น-เกาหลี) สืบทอดมา

ไวยากรณ์

P (ตัวแบ่งคำ: ปกติ;) p (ตัวแบ่งคำ: แบ่งทั้งหมด;) p (ตัวแบ่งคำ: เก็บทั้งหมด;)

3. การตัดคำในบรรทัดตัดคำ

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

สวัสดีทุกคน เรามาเริ่มกันเลยดีกว่า สมมติว่าเรามีข้อความต่อไปนี้:

รัฐบาลสหรัฐอาหรับเอมิเรตส์และฝ่ายบริหารกำลังมุ่งเน้นไปที่เทคโนโลยีใหม่ล่าสุดในเมืองนี้โดยอาศัยความสำเร็จล่าสุดของวิทยาศาสตร์และเทคโนโลยี โดยพยายามเปลี่ยนให้เป็นเมืองแห่งอนาคต ราวกับว่าส่งตรงจากหน้าจอของนิยายวิทยาศาสตร์บางเรื่อง ฟิล์ม. เทคโนโลยีเหล่านี้ได้แก่ หุ่นยนต์ตำรวจ รถหุ่นยนต์ และ ระบบการขนส่ง Hyperloop และในอนาคตอันใกล้นี้ บริการแท็กซี่บินได้อัตโนมัติจะเริ่มให้บริการในดูไบ และเพื่อเตรียมพร้อมสำหรับงานนี้ เครื่องบินโวโลคอปเตอร์ไฟฟ้าสองที่นั่งที่มีใบพัด 18 ตัว ซึ่งจะใช้เป็นแท็กซี่ ได้บินครั้งแรกในโหมดอัตโนมัติ โดยเขียนว่า...

เรามีข้อความที่เราจะเริ่มทำงานที่นี่

และคุณสมบัติแรกที่เราจะพิจารณาเรียกว่าการแตกคำ

ตัวแบ่งคำ: ปกติ | เก็บทั้งหมด | ทำลายทั้งหมด

เราสนใจสองความหมายเป็นหลัก ของทรัพย์สินนี้ปกติ - ค่าเริ่มต้นและการแบ่งทั้งหมดที่เรากำหนดว่าการตัดคำจะดำเนินการทีละตัวอักษร ส่วนเรื่องเก็บทั้งหมดนั้น มูลค่าที่กำหนดใช้เพื่อยัติภังค์คำในภาษาจีน ญี่ปุ่น และเกาหลี

P( ตัวแบ่งคำ: แบ่งทั้งหมด;. )

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

โชคดีที่มีคุณสมบัติที่คล้ายกันซึ่งถ่ายโอนเฉพาะคำที่ไม่พอดีกับอักขระเท่านั้น เรียกว่าล้น-ห่อ:

P( ล้นห่อ: แบ่งคำ; )

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

ล้น-ห่อ: ปกติ | แบ่งคำ | สืบทอด;

ตอนนี้เรามาดูคุณสมบัติ CSS ขั้นสูงสำหรับการตัดคำในข้อความกัน

ลองพิจารณาคุณสมบัติ white-space ซึ่งเราสามารถเลียนแบบการทำงานของแท็ก pre ได้โดยไม่ต้องเปลี่ยนข้อความเป็น monospace

ช่องว่างสีขาว: ปกติ | โน๊ตแรป | ก่อน | พรีไลน์ | ห่อล่วงหน้า | สืบทอด

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

พื้นที่สีขาว: nowrap;

การขึ้นบรรทัดใหม่ทั้งหมดจะถูกละเว้น และข้อความของเราจะแสดงเป็นบรรทัดเดียว

พื้นที่สีขาว: ก่อน;

หากค่าเป็นค่าก่อนหน้า ตัวแบ่งบรรทัดทั้งหมดจะคล้ายกับค่าในซอร์สโค้ด นอกจากนี้ หากข้อความไม่พอดีกับความกว้างที่ระบุ ข้อความนั้นจะไม่ถูกถ่ายโอน หากเราต้องการโอนเราต้องระบุค่าพรีไลน์

หากเราต้องการคำนึงถึงไม่เพียงแค่ตัวแบ่งบรรทัดเท่านั้น ซอร์สโค้ดแต่ต้องเว้นวรรคระหว่างคำด้วย ดังนั้นคุณต้องระบุ:

ช่องว่างสีขาว: ก่อนห่อ;

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

ฉันบอกลาคุณแล้ว ฉันขอให้คุณประสบความสำเร็จและโชคดี! ลาก่อน!

10 เมษายน 2559

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

เปิดใช้งานการใส่ยัติภังค์สำหรับคำที่ไม่พอดี

สมมติว่าฉันมีบล็อกที่มีความกว้าง 100 พิกเซล และฉันต้องเขียนข้อความลงไป มีคำอยู่ในข้อความ "การสกัดตัวเอง"- นี่คือลักษณะที่ไฟล์เก็บถาวรเกิดขึ้น เป็นต้น) แต่นั่นไม่ใช่ประเด็น คำนี้ยาวมาก มันไม่พอดีกับความกว้างของคอนเทนเนอร์ มาเขียนเป็นบล็อกแคบๆ กัน (100 พิกเซล) จะเกิดอะไรขึ้น?

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

การตัดคำ: แบ่งคำ;

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

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

เมื่อใดควรใช้การตัดคำ

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

ในบทความนี้ เราได้เรียนรู้วิธีการตัดคำใน CSS นั่นคือทั้งหมดสำหรับฉันในวันนี้ พบกันใหม่.

มักจะต้องเพิ่ม ย่อหน้าใหม่แต่ไม่มี บรรทัดว่างซึ่งถูกแทรกโดยแท็กย่อหน้า

สำหรับส่วนของข้อความบางส่วน การเว้นวรรคมาตรฐานนั้นไม่เหมาะสม สิ่งเหล่านี้อาจเป็นคำจารึกใต้รูปภาพและในตาราง บทกวี คำพูด เชิงอรรถ และบันทึกย่อ

หากต้องการบังคับให้ขึ้นบรรทัดใหม่จะมีการจัดเตรียมแท็กพิเศษซึ่งมีฟังก์ชันอยู่ในชื่อ br (แบ่งแถว - "แบ่งแถว, บรรทัด") แท็ก
ภาษาไฮเปอร์เท็กซ์ มาร์กอัป HTMLหมายความว่าเนื้อหาทั้งหมดที่ตามมาจะต้องขึ้นบรรทัดใหม่ หากจำเป็น คุณสามารถเพิ่มแท็กหลายแท็กในแถวเพื่อให้ได้ระยะห่างที่ต้องการ

แท็ก
ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่และไม่จำเป็นต้องมีแท็กปิดเพราะเหตุนี้ องค์ประกอบที่ว่างเปล่าแต่ควรทำความคุ้นเคยกับการปิดแท็กทั้งหมดจะดีกว่า ใน XHTML แท็กตัวแบ่งจะต้อง "ปิด" ด้วยแบ็กสแลช

ตัวอย่างการใช้แท็กแบ่ง