JavaScript แสดงเอฟเฟกต์ Ellipsis หลังจากที่เกินคอนเทนเนอร์
ในโครงการจริงเนื่องจากความไม่แน่นอนของความยาวของเนื้อหาข้อความและความคงที่ของเค้าโครงหน้าจึงเป็นสิ่งที่หลีกเลี่ยงไม่ได้ที่เนื้อหาข้อความจะเกิน DIV (หรือแท็กอื่น ๆ ด้านล่างเดียวกัน) วิธีที่ดีกว่าในเวลานี้คือการแสดงโดยอัตโนมัติในจุดไข่ปลา (…) เมื่อข้อความเกินความกว้างของ DIV ที่ จำกัด ด้วยวิธีนี้ตามธรรมเนียมผู้คนจะรู้ว่ามีข้อความที่นี่ที่ถูกละเว้น มีคุณสมบัติใน CSS ที่เรียกว่า Text-Overflow: Ellipsis; ตัวอย่างเช่นคุณสามารถเขียนได้เช่นนี้โดยใช้ CSS:
{Width: 27EM; พื้นที่สีขาว: NowRap; Text-Overflow: Ellipsis; -o-text-overflow: Ellipsis; Overflow: Hidden;} ข้อความ Overflow Ellipsis ไม่สามารถนำไปใช้ในเบราว์เซอร์ Firefox เพียงอย่างเดียวและข้อความจะถูกลดลงโดยตรงจากกลาง ฉันไม่ได้พูดคุยเกี่ยวกับวิธีการใช้ CSS เพื่อนำสิ่งนี้มาใช้ การใช้งาน CSS เฉพาะสามารถใช้กับ Baidu ได้ สิ่งที่สำคัญที่สุดที่นี่คือวิธีการใช้งานกับ JS และวิธีการเขียนองค์ประกอบง่าย ๆ ผ่าน JS ฉันสามารถเรียกใช้วิธีการเริ่มต้นของ JS โดยตรงเพื่อนำไปใช้! ตัวอย่างเช่นเอฟเฟกต์ต่อไปนี้:
จุดและจุดที่ด้านหลังแจ้งให้ผู้ใช้มีเนื้อหามากขึ้นที่ไม่ได้แสดงเพื่อให้เอฟเฟกต์ดังกล่าวสมบูรณ์!
พูดเรื่องไร้สาระน้อยลงก่อน! ก่อนอื่นมาดูเอฟเฟกต์การสาธิตที่ฉันทำและคุณจะเข้าใจว่ามันคืออะไร!
หากคุณต้องการดูเอฟเฟกต์โปรดคลิกฉัน! ตกลง?
1: ลองดูรายการการกำหนดค่าส่วนประกอบก่อน:
TargetCls
NULL รายการที่จำเป็นสำหรับคอนเทนเนอร์ที่จะถูกดักจับโดยเป้าหมายจะเป็นค่าเริ่มต้นโดยค่าเริ่มต้น
LimitInEnumber 1 จำนวนแถวที่แสดงคือ 1 บรรทัดตามค่าเริ่มต้น
พิมพ์ '... ' พิมพ์ที่เกินความยาวคอนเทนเนอร์จะแสดงโดยค่าเริ่มต้นเป็นจุดไข่ปลา
LineHeight 18 ความสูงของบรรทัดเริ่มต้นของโหนด DOM คือ 18
isshowtitle จริงชื่อจำเป็นต้องแสดงเนื้อหาทั้งหมด ค่าเริ่มต้นเป็นจริง
ข้อ จำกัด ที่ผิดพลาดในการแสดงจุดไข่ปลาตามความยาวของอักขระ
MaxLength 20 ความยาวเริ่มต้นคือ 20. จุดไข่ปลาจะปรากฏขึ้นหลังจากเกินอักขระ 20
สอง: การวิเคราะห์
1. ก่อนอื่นมาพูดถึงองค์ประกอบนี้: สนับสนุนสองวิธีในการสกัดกั้นสตริง ครั้งแรก: สกัดกั้นตามความยาวของตัวละครและแสดงจุดไข่ปลาหลังจากนั้นเกินกว่า ตัวอย่างเช่นฉันเรียกมันว่าแบบนี้:
ใหม่ multiLlipsis ({
"TargetCls": '.Text8'
"ischarlimit": จริง
"Maxlength": 18
-
การเริ่มต้นด้วยวิธีนี้หมายความว่า ischarlimit เป็นจริงซึ่งหมายถึงการสกัดกั้นด้วยจำนวนอักขระ ความยาวสูงสุดความยาวสูงสุดคือ 18. การเริ่มต้นด้วยวิธีนี้เนื่องจากรหัสจะพิจารณาก่อนว่าหาก ischarlimit เป็นจริงมันจะถูกสกัดกั้นโดยตรงตามจำนวนอักขระเช่นรหัสต่อไปนี้:
2. ประเภทที่สองถูกดักจับตามจำนวนแถวและความสูง ตัวอย่างเช่นความสูงของบรรทัดของรายการการกำหนดค่าเริ่มต้นคือ 18 ถ้าฉันต้องการแสดง 2 แถวนั่นคือความสูง h = 18*2 หากความสูงของคอนเทนเนอร์เป็น 100 วิธีการสกัดกั้นคือ:
ใช้ (100 - ความยาวของประเภท - 1) ไม่ว่าจะมากกว่า 18 × 2 ถ้ามากกว่านั้นจะสกัดกั้นต่อไปมิฉะนั้นจะไม่สกัดกั้นและเอฟเฟกต์จุดไข่ปลาจะปรากฏขึ้น! รหัสต่อไปนี้:
ข้อเสีย: อย่างไรก็ตามถ้าคุณใช้การสกัดกั้นแถวสูงมันก็โอเคถ้าข้อมูลมีขนาดค่อนข้างเล็ก แต่ถ้ามีข้อมูลจำนวนมากเช่นความสูง 500 พิกเซลหรือมากกว่านั้นมันจะส่งผลกระทบต่อประสิทธิภาพการทำงานเนื่องจากต้องคำนวณ n ครั้งในแต่ละครั้ง (n หมายความว่ามีฟังก์ชั่นมากมาย
รหัส JS ทั้งหมดมีดังนี้:
คัดลอกรหัส
/ * * MultiLlipsis ขึ้นอยู่กับ js * @author tugenhua */ function multiellipsis (ตัวเลือก) {var self = this; self.options = $ .extend ({}, ค่าเริ่มต้น, ตัวเลือก || {}); self._init (); } $ .extend (MultiLlipsis.prototype, {// หน้าเริ่มต้น _init: function () {var self = this, cfg = self.options; ถ้า (cfg.targetCls == null || $ (cfg.targetCls + ") [0] ว่างเปล่า! ");} return;} ถ้า (cfg.isshowtitle) {// เพิ่มแอตทริบิวต์ชื่อเรื่องเพื่อรับข้อความขององค์ประกอบ var title = self.getText (); $ (cfg.targetCls) .attr ({" ชื่อ ": ชื่อ}); } self._compareheight (cfg.lineHeight * cfg.limitlinenumber); Self.getText (); ถ้า text.length> cfg.maxlength) {var curtext = text.substring (0, cfg.maxlength); มิฉะนั้นไปที่เนื้อหา HTML โดยตรง * @method getText {public} */ getText: function () {var self = this, cfg = self.options; self = this, cfg = self.options; ") [0]). html (ข้อความ); > maxlineHeight) {self._deletetext (self.getText ());}}, /** ข้อความสกัดกั้น* @method _deletetext {ส่วนตัว}* @return ส่งกลับข้อความที่สกัด text.substring (0, text.length - typelen - 1); ฟังก์ชัน () {var self = this, cfg = self.options; var defaults = {'targetCls': null, // คอนเทนเนอร์ที่จะถูกดักจับโดย target'limitlinenumber ': 1, // จำนวนแถวที่ถูก จำกัด โดยจำนวนแถว* ความสูงของแถวของเส้น> = ความสูงของคอนเทนเนอร์' ประเภท ':' ... node'isshowtitle ': จริงหรือ//ชื่อแสดงเนื้อหาทั้งหมดเป็นจริงโดยค่าเริ่มต้น' ischarlimit ': false, // ellipsis จอแสดงผลถูก จำกัด ด้วยความยาวของอักขระ' maxlength ': 20 // ค่าเริ่มต้นคือ 20};วิธีการด้านบนของการแสดงเอฟเฟกต์จุดไข่หลังจาก JavaScript เกินคอนเทนเนอร์ (เข้ากันได้กับหนึ่งบรรทัดหรือหลายบรรทัด) เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น