คุณสมบัติ text-overflow

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

เพื่อให้คุณสมบัตินี้ทำงาน ข้อความจะต้องถูกตัด ผ่านคุณสมบัติ overflow หรือคุณสมบัติ overflow-x โดยมีค่าเป็น hidden, auto หรือ scroll หากตั้งค่าเป็น visible (ซึ่งเป็น ค่าเริ่มต้น) - text-overflow จะไม่ทำงาน

ไวยากรณ์

ตัวเลือก {
	text-overflow: ellipsis | clip;
}

ค่าที่ใช้ได้

ค่า	คำอธิบาย
`ellipsis`	เพิ่มจุดไข่ปลา (ellipsis) ที่ท้ายข้อความที่ถูกตัด
`clip`	ไม่เพิ่มจุดไข่ปลา (ellipsis) ที่ท้าย (นี่เป็นค่าเริ่มต้น ใช้เพื่อ ยกเลิกการทำงานของคุณสมบัตินี้เมื่อจำเป็น)

ค่าเริ่มต้น: clip

ตัวอย่าง . ข้อความที่ล้นออกมา

ในตัวอย่างนี้ คำที่ยาวมากจะไม่สามารถวางใน คอนเทนเนอร์ได้และจะล้นออกมานอกขอบเขต การตัด ไม่เกิดขึ้น:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: visible;
	border: 1px solid red;
}

ตัวอย่าง . เพิ่มคุณสมบัติ overflow

ตอนนี้ ทุกสิ่งที่ล้นออกมานอกขอบเขตของคอนเทนเนอร์ จะถูกตัดไป:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	border: 1px solid red;
}

ตัวอย่าง . ค่า ellipsis

ตอนนี้ นอกเหนือจากคุณสมบัติ overflow แล้ว เราเพิ่ม text-overflow ที่มีค่า ellipsis เข้าไปด้วย ข้อความที่ถูกตัดจะเพิ่ม จุดไข่ปลา (ellipsis) ที่ท้าย:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

ตัวอย่าง . พร้อมแถบเลื่อน

หากตั้งค่า overflow: auto และ text-overflow: ellipsis แถบเลื่อนจะปรากฏขึ้น แต่จุดไข่ปลา (ellipsis) จะยังคงถูกเพิ่ม ลองเลื่อนแถบเลื่อนในตัวอย่าง:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	text-overflow: ellipsis;
	border: 1px solid red;
}

ตัวอย่าง . หากไม่มีคำที่ยาวมาก

หากไม่มีคำที่ยาวมากพอที่จะล้น ออกมานอกขอบเขตของคอนเทนเนอร์ การตัด จะไม่เกิดขึ้น (เพราะไม่มีอะไรล้นออกมา) ดู ตัวอย่างต่อไปนี้:

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

ตัวอย่าง . ข้อความบรรทัดเดียว

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

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

ตัวอย่าง . ความกว้างเป็นเปอร์เซ็นต์

หากกำหนดความกว้างของบล็อกเป็น % การตัด ก็จะยังคงทำงานอย่างถูกต้อง:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 80%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

ดูเพิ่มเติม

คุณสมบัติ word-break และ overflow-wrap,
ซึ่งอนุญาตให้แบ่งตัวอักษรของคำยาวไปยังบรรทัดใหม่
คุณสมบัติ hyphens,
ซึ่งเปิดใช้งานการแบ่งคำตามพยางค์
คุณสมบัติ overflow,
ซึ่งตัดส่วนที่ล้นออกมานอกขอบเขตของบล็อก