วิธีการเปลี่ยนการตัดข้อความเริ่มต้นด้วย HTML และ CSS

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

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

นอกจากเบราว์เซอร์แล้ว ดูแลพื้นที่; พวกเขารวมหลายช่องว่างที่ต่อเนื่องกันในซอร์สโค้ดลงในช่องว่างเดียวบนหน้าที่แสดงผลและพวกเขายังลงทะเบียนตัวแบ่งบรรทัดบังคับก่อนที่จะเริ่มทำงานในการตัด.

เมื่อใดที่จะเปลี่ยนการตัดข้อความเริ่มต้น

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

มันอาจเกิดขึ้นที่เราเพิ่งหมดท่า ต้องการช่องว่างเหล่านั้นเก็บรักษาไว้ในข้อความของเรา, อย่างไรก็ตามเบราว์เซอร์ยังคงรวมเป็นหนึ่ง ๆ บังคับให้เราเพิ่มหลายรายการ ในซอร์สโค้ด.

การกำหนดลักษณะการตัดอาจยัง เปลี่ยนด้วยภาษาและวัตถุประสงค์ของข้อความ. บทความข่าวภาษาจีนกลางและบทกวีภาษาฝรั่งเศสไม่จำเป็นต้องห่อด้วยวิธีเดียวกัน.

มีคุณสมบัติ CSS จำนวนมาก (และองค์ประกอบ HTML!) ที่สามารถทำได้ ควบคุมการตัดและเบรกพอยต์ และนอกจากนี้ยังมี กำหนดวิธีการเว้นวรรคและการแบ่งบรรทัดก่อนประมวลผล.

โอกาสในการพันแบบอ่อน

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

วิธีที่ง่ายที่สุดในการ บังคับให้หยุดพักเพิ่ม สามารถทำได้โดยใช้ดีเก่า
ธาตุ.

ช่องว่าง

หากคุณคุ้นเคยกับ พื้นที่สีขาว คุณสมบัติ CSS ฉันคิดว่าคุณต้องรู้ก่อนในแบบเดียวกับคนอื่น ๆ ในขณะที่ค้นหาวิธีการ ป้องกันการตัดข้อความ. nowrap มูลค่าของ พื้นที่สีขาว ทำอย่างนั้น.

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

เป็นเรื่องปกติ อักขระช่องว่างแนวนอนเดียว คือสิ่งที่เราเพิ่มโดยการกดปุ่ม Spacebar ปุ่ม Tab ยังเพิ่ม พื้นที่ที่คล้ายกัน แต่มีความยาวมากกว่า. ป้อนรหัสเพิ่ม a พื้นที่แนวตั้ง เพื่อเริ่มบรรทัดใหม่และ ใน HTML เพิ่ม พื้นที่แตกเดียว ไปยังหน้าเว็บ เช่นนี้มีช่องว่างมากมายที่ประกอบด้วย “ช่องว่าง”.

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

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

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

 
 â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี¢Â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. 

 .textContainer width: 500px; ความสูง: 320px;  

หลังจากทาแล้ว พื้นที่สีขาว: nowrap; กฎการตัดข้อความจะเปลี่ยนตามวิธีต่อไปนี้:

 .textContainer / * … * / white-space: nowrap;  

ก่อน มูลค่าของ พื้นที่สีขาว รักษาช่องว่างทั้งหมด และ ป้องกันการตัดข้อความ:

 .textContainer / * … * / white-space: pre;  

ก่อนห่อ มูลค่าของ พื้นที่สีขาว รักษาช่องว่างทั้งหมด และ ตัดข้อความ:

 .textContainer / * … * / white-space: pre-wrap;  

ในที่สุด, ก่อนสาย มูลค่าของ พื้นที่สีขาว รักษาช่องว่างตามแนวตั้ง เช่นบรรทัดใหม่และ ตัดข้อความ:

 .textContainer / * … * / white-space: pre-line;  

Word แบ่ง

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

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

 .textContainer / * … * / word-break: break-all;  

คำแบ่ง สถานที่ให้บริการมีค่าที่สามนอกเหนือจาก ทำลายทั้งหมด และ ปกติ (เป็นของการแบ่งบรรทัดเริ่มต้น) เก็บไว้ทั้งหมด ราคา ไม่อนุญาตให้แบ่งคำ.

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

ตัวอย่างเช่น ตัวอักษรในคำภาษาเกาหลี, เริ่มขาดเพื่อการห่อ, จะถูกเก็บไว้ด้วยกัน เมื่อ พื้นที่สีขาว: Keep-all; มีการระบุกฎ.

ì ??¸ÃªÂ³ย ?? 를 Ã-A-A¥Ã- ?? ?? ë ??  ?? Ã- ??  ??, ìÂë ??  ?? ì½ย ?? «ความ ?? ?? ë¡ย ?? Ã- ?? ?? ì ??-A¬Â ?? ?? ì ??¤. ì10Ã- ??  ?? ìÂë ??  ?? ì½ย ?? ë ?? ?? êµÂ-A¬ยยย Ã- ?? ?? ì ?? ?? ê° ?? 1997Ã…Â…Â ?? 3A¬Â ?? ?? 10A¬Â ??¼Ã«Â¶Ã°12ì ??¼ÃªÂ¹ย ?? ì§ย ?? ë ?? …ì ??¼Ã¬Â ?? ?? ë§ย ?? ì ??¸Ã¬Â¦ย ?? ìA-ย ?? ì ?? ?? ìA-ย´Ã«Â¦Â½Ã«Â ?? ?? ë ??¤. ì§ย ?? ê¸ย ?? ë ?? ±Ã«Â¡ย ?? Ã- ?? ?? ì ??-A¬Â ?? ?? ì ??¤. ì ??´ Ã- ?? ?? ì ?? ?? ìA-ย ?? ì ?? ?? ë ?? ?? ìÂ-…ê³ย ?? ì«° ?? ì ?? ?? ìยยยย«¬Â¸ÃªÂ° ?? ë ??¤Ã¬Â ??´ Ã- ??¨ÃªÂ»ย ?? 모ìA-ย¬ ë ??¤Ã¬Â ?? ?? ê³¼ ê° ?? ì ?? ?? ë¶ย ?? ì ??¼Ã«Â¥Â¼ ë ??¤Ã«Â£¹Ã«Â ?? ?? ë ??¤.

 .textContainer / * … * / word-break: keep-all;  

คุณสมบัตินี้อาจรองรับค่าอื่นที่เรียกว่า แบ่งคำ ในอนาคต. คุณจะเห็นว่า แบ่งคำ ทำงานในภายหลังใน “ห่อมากเกิน” ส่วนของบทความนี้.

โอกาสทำลายคำ

นักพัฒนาสามารถ เพิ่มโอกาสในการตัดคำ, ใช้ องค์ประกอบ HTML หากเบราว์เซอร์ต้องการตัดสตริงข้อความมันจะพิจารณาจุดที่เหมาะสม เป็นปัจจุบันสำหรับโอกาสในการห่อ.

 
 â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? Hello â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. â ?? ?? สวัสดี. 
 

 .textContainer / * … * / white-space: pre-wrap;  

ไม่มี , ทั้งหมดนี้ “สวัสดี” คำจะมีการแสดงผลในบรรทัดใหม่ โดยการเพิ่ม สำหรับโค้ด HTML เราได้แจ้งเบราว์เซอร์ว่า มันก็โอเคที่จะทำลายคำที่จุดนั้นสำหรับการห่อ, ในกรณีที่จำเป็น.

ยัติภังค์

ยัติภังค์ คุณสมบัติ CSS คือ อีกวิธีในการควบคุมการแบ่งระหว่างตัวอักษร ในโลก. เรามีบทความแยกต่างหากเกี่ยวกับการใส่ไฮเฟ็น CSS หากคุณสนใจ ในระยะสั้นทรัพย์สินที่ช่วยให้คุณ สร้างโอกาสในการห่อด้วยการใส่ไฮเฟ็น.

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

 
 คลิกที่นี่เพื่อดูบทร้อง bluehouse bluehouse bluehouse bluehouse 
 

 .textContainer / * … * / -webkit-hyphens: auto; -ms-hyphens: auto; ยัติภังค์: อัตโนมัติ;  

ห่อมากเกิน

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

สังเกตได้ว่า ล้นห่อ เป็นที่รู้จักกันว่า ตัดคำ (พวกเขาเป็นนามแฝง).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

 .textContainer / * … * / overflow-wrap: break-word;  

เนื่องจากไม่มีช่องว่างระหว่างตัวอักษรในรหัส HTML ด้านบน (เช่นไม่มีการตัดโอกาส) ข้อความจึงไม่ถูกห่อในตอนแรกและ ถูกเก็บรักษาไว้เป็นคำเดียว.

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