يعرض JavaScript تأثير القطع الناقص بعد تجاوز الحاوية
في المشاريع الفعلية ، نظرًا لعدم اليقين في طول محتوى النص وثبات تخطيط الصفحة ، فمن المحتم أن يتجاوز محتوى النص منطقة DIV (أو العلامات الأخرى ، وهو نفسه أدناه). تتمثل الطريقة الأفضل في هذا الوقت في عرضه تلقائيًا في القطع النارية (...) عندما يتجاوز النص عرض DIV المحدود. وبهذه الطريقة ، وفقًا للعرف ، سيعرف الناس أن هناك نصوصًا تم حذفها هنا. هناك خاصية في CSS تسمى Text-Overflow: Ellipsis ؛ على سبيل المثال ، يمكنك كتابته مثل هذا باستخدام CSS:
{العرض: 27em ؛ الفضاء الأبيض: Nowrap ؛ Text-Overflow: ellipsis ؛ -o-text-overflow: ellipsis ؛ الفائض: مخفي ؛} لا يمكن تنفيذ القطع الناقص في تدفق النص في متصفح Firefox وحده ، ويتم إسقاط النص مباشرة من الوسط. لا أتحدث عن كيفية استخدام CSS لتنفيذ هذا. يمكن استخدام تطبيق CSS المحدد على Baidu. الشيء الأكثر أهمية هنا هو كيفية تنفيذها مع JS وكيفية كتابة مكون بسيط من خلال JS. يمكنني استدعاء طريقة تهيئة JS مباشرة لتنفيذها! على سبيل المثال ، الآثار التالية:
تطالب النقاط والنقاط في الخلف المستخدم بأن هناك المزيد من المحتوى الذي لم يتم عرضه لإكمال مثل هذا التأثير!
قل أقل هراء أولا! أولاً ، دعنا نلقي نظرة على التأثير التجريبي الذي أدليت به وسوف تفهم ما هو عليه!
إذا كنت ترغب في رؤية التأثير ، يرجى النقر علىني! نعم؟
1: دعونا نلقي نظرة على عناصر تكوين المكون أولاً:
TargetCls
خالية ، العناصر المطلوبة للحاوية التي يتم اعتراضها بواسطة الهدف هي فارغة بشكل افتراضي
LimitLinenumber 1 ، عدد الصفوف المراد عرضها هو سطر واحد افتراضيًا
اكتب "..." ، يتم عرض النوع الذي يتجاوز طول الحاوية افتراضيًا إلى Ellipsis
Lineheight 18 ، ارتفاع الخط الافتراضي لعقدة DOM هو 18
isShowtitle True ، العنوان مطلوب لعرض جميع المحتويات. الافتراضي صحيح
حدود كاذبة ISCHARLIMIT لعرض القطع النارية بناءً على طول الحرف
MaxLength 20 يبلغ الطول الافتراضي 20. سيتم عرض القطع النارية بعد تجاوز الحرف 20.
الثاني: التحليل
1. أولاً ، دعنا نتحدث عن هذا المكون: دعم طريقتين لاعتراض السلاسل. أولاً: اعتراض وفقًا لطول الأحرف ، وعرض القطع النارية بعد تجاوزها. على سبيل المثال ، أسميها مثل هذا:
multiellipsis جديد ({
"TargetCls": '.Text8' ،
"isCharlimit": صحيح ،
"MaxLength": 18
}) ؛
التهيئة بهذه الطريقة تعني أن isCharlimit صحيح ، مما يعني الاعتراض على عدد الأحرف. الحد الأقصى للطول يبلغ طوله هو 18. التهيئة بهذه الطريقة ، لأن الكود سيحدد أولاً أنه إذا كان Ischarlimit صحيحًا ، فسيتم اعتراضه مباشرة وفقًا لعدد الأحرف ، مثل الرمز التالي:
2. يتم اعتراض النوع الثاني بناءً على عدد الصفوف والارتفاعات. على سبيل المثال ، ارتفاع خط عنصر التكوين الافتراضي هو 18. إذا كنت أرغب في عرض صفين ، أي الارتفاع H = 18*2. إذا كان ارتفاع الحاوية 100 ، فإن طريقة الاعتراض هي:
استخدم (100 - طول النوع - 1) ما إذا كان أكبر من 18 × 2 ، إذا كان أكبر من الاستمرار في الاعتراض ، وإلا فلن يتم اعتراضه ، وسيتم عرض تأثير القطع الناقص! الرمز التالي:
العيوب: ومع ذلك ، إذا كنت تستخدم اعتراضًا عالياً ، فلا بأس إذا كانت البيانات صغيرة نسبيًا ، ولكن إذا كان هناك الكثير من البيانات ، مثل ارتفاع 500 بكسل أو أكثر ، فسيؤثر ذلك نسبيًا على الأداء ، لأنه يتعين عليهم حساب الأوقات في كل مرة (N تعني أن هناك العديد من الوظائف التي تستدعي الحلقة).
جميع رموز JS هي كما يلي:
انسخ الرمز
/ * * multiellipsis استنادًا إلى JS * Author Tugenhua */ function multiellipsis (Options) {var self = this ؛ self.options = $ .extend ({} ، الافتراضات ، الخيارات || {}) ؛ self._init () ؛ } دولار. فارغ! } self._compareheight (cfg.lineheight * cfg.limitlinenber) ؛ if (text.lender> cfg.maxlength) {var curtext = text.substring (0 ، cfg.maxlength) ؛ محتوى HTML مباشرة * method getText {public} */ getText: هذا ، cfg = self.options ؛ ") [0]). HTML (TEXT) ؛ MaxlineHeight) {self._deletext (self.getText ()) ؛ Text.SubString (0 ، Length - Typelen - 1) ؛ function () {var self = this ، cfg = self.options ؛ var defaults = {'targetcls': null ، // الحاوية التي سيتم اعتراضها بواسطة الهدف'limitlinenumber ': 1 ، // عدد الصفوف المحدودة بعدد الصفوف* ارتفاع الصف في السطر> = ارتفاع "النوع": "... node'isshowtitle ': true ، // ما إذا كان العنوان يعرض جميع المحتوى صحيحًا بشكل افتراضي "Ischarlimit": false ، // يقتصر القطرات على طول الحرف "MaxLength": 20 // الافتراضي هو 20} ؛الطريقة أعلاه لعرض تأثير القطع النارية بعد أن تتجاوز JavaScript الحاوية (متوافقة مع سطر واحد أو خطوط متعددة) هي كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.