วิธีตัดข้อความลงในบรรทัดใหม่ใน CSS

ข้อความยาวอาจดูเหมือนควบคุมไม่ได้ระหว่างการออกแบบเว็บ แต่ก็หลีกเลี่ยงไม่ได้เช่นกัน และบางครั้งพวกเขาก็ข้ามพรมแดน สิ่งนี้สามารถสร้าง Document Object Model (DOM) แบบหลวมโดยมีการโอเวอร์โฟลว์ที่ไม่จำเป็นซึ่งไม่เป็นมิตรกับผู้ใช้

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

วิธีตัดข้อความ CSS ทำงานอย่างไร

CSS จัดการกับคำยาวเหยียดโดยใช้ inbuilt ตัดคำ หรือ ล้นห่อ คุณสมบัติ.

วิธีหยุดเล่นอัตโนมัติใน firefox

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

ที่เกี่ยวข้อง: สิ่งที่คุณต้องรู้เกี่ยวกับ DOM

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

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

วิธีตัดคำยาวๆ โดยใช้ CSS Word Wrap

การรวมคำในบรรทัดใหม่ด้วย CSS นั้นง่ายดายและไม่ต้องการการปรับแต่ง CSS ที่ยุ่งยากในการทำงาน

ตัวอย่างเช่น ยาว ชั่วโมง2 ข้อความภายในที่เก็บข้อความในภาพตัวอย่างด้านล่างข้ามเส้นขอบ:

เรามาดูกันว่าเราจะห่อมันในบรรทัดถัดไปโดยใช้ปุ่ม . ได้อย่างไร ตัดคำ คุณสมบัติ CSS:

HTML :

  
This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above

CSS :

.wrap-it{  
word-wrap: break-word;  
}

หลังจากห่อยาว ชั่วโมง2 ข้อความในภาพตัวอย่าง นี่คือผลลัพธ์:

แค่นั้นแหละ! ตอนนี้คุณรู้วิธีตัดคำลงในบรรทัดใหม่ภายใน DOM ของคุณโดยใช้ CSS แล้ว

ข้อยกเว้นบริการระบบ bsod windows 10

ที่เกี่ยวข้อง: วิธีกำหนดเป้าหมายส่วนของหน้าเว็บโดยใช้ตัวเลือก CSS

อย่างไรก็ตาม ดังที่ได้กล่าวไว้ก่อนหน้านี้ว่า ตัดคำ และ ล้นห่อ ทำงานในลักษณะเดียวกันและยอมรับคุณสมบัติที่คล้ายคลึงกัน

ใช้ ล้นห่อ แทนเพียงแค่แทนที่ ตัดคำ กับมัน

การห่อคำบนเว็บเพจเป็นสิ่งสำคัญ

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

ดังนั้น การใช้การตัดข้อความกับส่วนดังกล่าวจึงมีความจำเป็นเพื่อรักษา DOM ไว้เหมือนเดิม

ที่กำลังบล็อกฉันในเฟสบุ๊ค

แบ่งปัน แบ่งปัน ทวีต อีเมล วิธีใช้ Media Queries ใน HTML และ CSS เพื่อสร้างเว็บไซต์ที่ตอบสนอง

ต้องการทำให้เว็บไซต์ของคุณดูน่าทึ่งบนอุปกรณ์เคลื่อนที่หรือไม่ ได้เวลาเรียนรู้วิธีใช้คิวรี่สื่อใน CSS

อ่านต่อไป หัวข้อที่เกี่ยวข้อง

การเขียนโปรแกรม
CSS
โมเดลวัตถุเอกสาร

เกี่ยวกับผู้เขียน อิดิโซ โอมิโซลา(94 บทความที่ตีพิมพ์)

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

เพิ่มเติมจาก Idowu Omisola

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก