เพื่อเป็นการไม่ให้เสียเวลา มาเริ่มด้วยโค้ดกันเลย!
1. แสดงข้อความเพียงบรรทัดเดียวแล้วซ่อนและละเว้น
// แสดงข้อความเพียงบรรทัดเดียวแล้วละเว้น .element {
width: 300px; /* ต้องกำหนดความกว้างคงที่ */
white-space: nowrap; /* บังคับให้แสดงบรรทัดเดียวโดยไม่ต้องตัดบรรทัด */
ล้น: ซ่อน; /* ซ่อนส่วนที่เกินจากกล่อง */
ข้อความล้น: จุดไข่ปลา; /* แสดงจุดไข่ปลาส่วนเกิน */
-2. แสดงข้อความตามจำนวนบรรทัดที่ระบุ จากนั้นซ่อนและละเว้น
// ละเว้นหลังจากแสดง text.element หลายบรรทัด {
width: 300px; /* ต้องกำหนดความกว้างคงที่ */
จอแสดงผล: -webkit-box; /* ใช้รูปแบบกล่องที่ยืดหยุ่น */
-webkit-box-orient: แนวตั้ง; /* การจัดเรียงแนวตั้ง */
-webkit-line-clamp: 3; /* แสดงสามบรรทัด */
ล้น: ซ่อน; /* ซ่อนส่วนที่เกินจากกล่อง */
ข้อความล้น: จุดไข่ปลา; /* แสดงจุดไข่ปลาส่วนเกิน */
- ข้อความหลายบรรทัดถูกละเว้นโดยใช้ display: -webkit-box; เค้าโครงกล่องแบบยืดหยุ่น และ -webkit-line-clamp เพื่อให้ได้การตัดทอนข้อความแบบหลายบรรทัด
หมายเหตุ: วิธีนี้เหมาะสำหรับเบราว์เซอร์หลักของ WebKit (เช่น Chrome, Safari เป็นต้น) สำหรับเบราว์เซอร์อื่นๆ อาจจำเป็นต้องมีการสนับสนุน polyfill เพิ่มเติม
โซลูชั่นอื่น ๆ
1. ใช้ JavaScript เพื่อคำนวณความสูงของเนื้อหาข้อความแบบไดนามิกและตัดทอน
2. ใช้ไลบรารีที่มีอยู่: เช่น: Clamp.js
Clamp.js: ไลบรารีน้ำหนักเบาสำหรับการตัดข้อความหลายบรรทัดข้ามเบราว์เซอร์
//บรรทัดเดียว $clamp(myHeader, {clamp: 1});
//หลายบรรทัด $clamp(myHeader, {clamp: 3});
//คำนวณจำนวนแถวโดยอัตโนมัติตามความสูงที่มีอยู่ $clamp(myParagraph, {clamp: 'auto'});
//คำนวณจำนวนบรรทัดโดยอัตโนมัติตามความสูงคงที่ $clamp(myParagraph, {clamp: '35px'}); 3. CSS Fallback (โซลูชันความเข้ากันได้บางส่วน)
สำหรับเบราว์เซอร์บางตัว แม้ว่าจะไม่มีการสนับสนุนโดยตรงสำหรับแอตทริบิวต์ -webkit-line-clamp แต่เราสามารถรวมเข้ากับ CSS แบบธรรมดาเพื่อให้ได้ผลลัพธ์โดยประมาณ
.องค์ประกอบ {
แสดง: บล็อก; /* แสดงเป็นบล็อก */
ล้น: ซ่อน; /* ซ่อนเนื้อหาส่วนเกิน */
ข้อความล้น: จุดไข่ปลา; /* แสดงจุดไข่ปลาส่วนเกิน */
ความสูงของบรรทัด: 1.5em; /* ตั้งค่าความสูงของบรรทัด */
ความสูงสูงสุด: 4.5em; /* ความสูงสูงสุด 3 บรรทัด, 3 บรรทัด * สูง 1.5 บรรทัด = 4.5em */
white-space: ปกติ; /* รักษาการตัดข้อความปกติ */
-แม้ว่าโครงร่างนี้จะไม่สามารถตัดทอนหลายบรรทัดได้อย่างแม่นยำในทุกกรณี แต่ก็ยังเหมาะสำหรับการรองรับการแสดงการละเว้นข้อความแบบหลายบรรทัดพื้นฐาน
สรุปบทความนี้เกี่ยวกับการซ่อนและการแสดงจุดไข่ปลาหลังจากข้อความ CSS เกินขีดจำกัดและวิธีแก้ปัญหาความเข้ากันได้ของเบราว์เซอร์อื่นๆ สำหรับข้อความ CSS ที่เกี่ยวข้องเพิ่มเติมเกินเนื้อหาที่ซ่อนอยู่ โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรือเรียกดูบทความที่เกี่ยวข้องด้านล่างต่อ หวังว่าคุณจะสนับสนุน downcodes.com มากขึ้นในอนาคต!