เอ ฟเฟกต์ข้อความ CSS
CSS Text Overflow, Word Wrap, Line Breaking Rules และโหมดการเขียน
ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติดังต่อไปนี้:
text-overflow
word-wrap
word-break
writing-mode
CSS Text Overflow
คุณสมบัติ CSS text-overflow
ระบุว่าเนื้อหาที่ล้นซึ่งไม่ได้แสดงควรส่งสัญญาณไปยังผู้ใช้อย่างไร
สามารถตัดได้:
นี่เป็นข้อความยาวๆ ที่ไม่เข้ากล่อง
หรือสามารถแสดงผลเป็นจุดไข่ปลา (...):
นี่เป็นข้อความยาวๆ ที่ไม่เข้ากล่อง
รหัส CSS มีดังนี้:
ตัวอย่าง
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
ตัวอย่างต่อไปนี้แสดงวิธีการแสดงเนื้อหาที่ล้นเมื่อวางเมาส์เหนือองค์ประกอบ:
ตัวอย่าง
div.test:hover {
overflow: visible;
}
CSS Word Wrapping
คุณสมบัติ CSS word-wrap
ช่วยให้สามารถแยกคำที่ยาวและตัดเป็นบรรทัดถัดไปได้
หากคำหนึ่งยาวเกินกว่าจะพอดีกับพื้นที่ คำนั้นจะขยายออก:
ย่อหน้านี้ประกอบด้วยคำที่ยาวมาก: thisisaveryveryveryveryveryverylongword คำที่ยาวจะแตกและตัดไปยังบรรทัดถัดไป
คุณสมบัติ word-wrap ช่วยให้คุณสามารถบังคับข้อความให้ตัด - แม้ว่าจะหมายถึงการแยกคำกลางคำ:
ย่อหน้านี้ประกอบด้วยคำที่ยาวมาก: thisisaveryveryveryveryveryverylongword คำที่ยาวจะแตกและตัดไปยังบรรทัดถัดไป
รหัส CSS มีดังนี้:
ตัวอย่าง
ปล่อยให้คำยาวๆ แตกและรวมเป็นบรรทัดถัดไปได้:
p {
word-wrap: break-word;
}
CSS Word Breaking
คุณสมบัติ CSS word-break
ระบุกฎการแบ่งบรรทัด
ย่อหน้านี้ประกอบด้วยข้อความบางส่วน บรรทัดนี้จะทำลายเครื่องหมายยัติภังค์
ย่อหน้านี้ประกอบด้วยข้อความบางส่วน เส้นจะแตกที่อักขระใดก็ได้
รหัส CSS มีดังนี้:
ตัวอย่าง
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}
โหมดการเขียน CSS
คุณสมบัติ CSS writing-mode
ระบุว่าบรรทัดของข้อความถูกจัดวางในแนวนอนหรือแนวตั้ง
ข้อความบางส่วนที่มีองค์ประกอบช่วงที่มี a แนวตั้ง-rl โหมดการเขียน
ตัวอย่างต่อไปนี้แสดงโหมดการเขียนที่แตกต่างกัน:
ตัวอย่าง
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
}
คุณสมบัติเอฟเฟกต์ข้อความ CSS
ตารางต่อไปนี้แสดงรายการคุณสมบัติเอฟเฟกต์ข้อความ CSS:
Property | Description |
---|---|
text-justify | Specifies how justified text should be aligned and spaced |
text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
word-break | Specifies line breaking rules for non-CJK scripts |
word-wrap | Allows long words to be able to be broken and wrap onto the next line |
writing-mode | Specifies whether lines of text are laid out horizontally or vertically |