CSS3 ข้อความ
CSS3 มีคุณสมบัติใหม่หลายข้อความ
ในบทนี้คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติของข้อความต่อไปนี้:
-
text-overflow -
word-wrap -
word-break
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -o- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
CSS3 ล้นข้อความ
CSS3 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;
} ลองตัวเอง» ตัวอย่างต่อไปนี้แสดงให้เห็นว่าคุณสามารถแสดงเนื้อหาล้นเมื่อโฉบเหนือองค์ประกอบ:
CSS3 ตัดคำ
CSS3 word-wrap คุณสมบัติช่วยให้คำยาวจะสามารถที่จะถูกทำลายและห่อบนบรรทัดถัดไป
หากคำยาวเกินไปให้พอดีกับพื้นที่ที่จะขยายออกไปข้างนอก:
วรรคนี้มีคำที่ยาวมาก: thisisaveryveryveryveryveryverylongword คำยาวจะทำลายและห่อยังบรรทัดถัดไป
สถานที่ให้บริการคำห่อช่วยให้คุณสามารถที่จะบังคับให้ข้อความที่จะห่อ - แม้ว่าจะหมายถึงการแยกมันอยู่ตรงกลางของคำ:
วรรคนี้มีคำที่ยาวมาก: thisisaveryveryveryveryveryverylongword คำยาวจะทำลายและห่อยังบรรทัดถัดไป
รหัส CSS เป็นดังนี้
ตัวอย่าง
อนุญาตให้คำยาวจะสามารถที่จะถูกทำลายและห่อบนบรรทัดถัดไป:
p {
word-wrap: break-word;
}
ลองตัวเอง» CSS3 โปรแกรม Word ทำลาย
CSS3 word-break ทรัพย์สินระบุกฎบรรทัดหมด
วรรคนี้มีข้อความบางส่วน บรรทัดนี้จะทำลาย-at-ยัติภังค์
วรรคนี้มีข้อความบางส่วน เส้นที่จะทำลายตัวอักษรใด ๆ
รหัส CSS เป็นดังนี้
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 »
ข้อความคุณสมบัติ CSS3
ตารางต่อไปนี้แสดงคุณสมบัติข้อความ CSS3 ใหม่:
| คุณสมบัติ | ลักษณะ |
|---|---|
| text-align-last | ระบุวิธีจัดแนวบรรทัดสุดท้ายของข้อความ |
| text-emphasis | จดชวเลขสำหรับการตั้งค่าข้อความเน้นสไตล์และข้อความเน้นสีในหนึ่งประกาศ |
| text-justify | ระบุว่าข้อความเป็นธรรมควรจะสอดคล้องและเว้นระยะ |
| text-overflow | ระบุเนื้อหาวิธีล้นที่จะไม่แสดงควรจะส่งสัญญาณให้กับผู้ใช้ |
| word-break | ระบุกฎหมดบรรทัดสคริปต์ไม่ใช่ CJK |
| word-wrap | ช่วยให้คำยาวจะสามารถที่จะถูกทำลายและห่อบนบรรทัดถัดไป |