كيفية قص النص الطويل باستخدام CSS. قم بقص نص مفرد أو متعدد الأسطر إلى الارتفاع عن طريق إضافة علامة القطع Div لقص المحتوى

فلاد ميرزيفيتش

على الرغم من حقيقة أن الشاشات القطرية الكبيرة أصبحت ميسورة التكلفة وأن دقتها تتزايد باستمرار، إلا أنه في بعض الأحيان تنشأ مهمة تركيب الكثير من النص في مساحة محدودة. على سبيل المثال، قد تكون هناك حاجة لهذا اصدار المحمولالموقع أو للواجهة التي يكون فيها عدد الخطوط مهمًا. في مثل هذه الحالات، يكون من المنطقي قص الأسطر الطويلة من النص، مع ترك بداية الجملة فقط. بهذه الطريقة سنجعل الواجهة في شكل مضغوط وتقليل كمية المعلومات المعروضة. يمكن إجراء قطع الخط نفسه على جانب الخادم باستخدام نفس PHP، ولكن الأمر أسهل من خلال CSS، ويمكنك دائمًا إظهار النص بالكامل، على سبيل المثال، عند تحريك مؤشر الماوس فوقه. بعد ذلك، سنلقي نظرة على طرق قص النص باستخدام مقص وهمي.

في الواقع، كل ذلك يعود إلى استخدام الخاصية overflow مع القيمة المخفية. تكمن الاختلافات فقط في العرض المختلف لنصنا.

باستخدام الفائض

لكي تظهر خاصية التجاوز مع النص بكل مجده، تحتاج إلى إلغاء تغليف النص باستخدام مسافة بيضاء مع القيمة nowrap . إذا لم يتم ذلك، فلن يحدث التأثير الذي نحتاجه؛ سيتم إضافة الواصلات إلى النص وسيتم عرض النص بأكمله. يوضح المثال 1 كيفية قص النص الطويل باستخدام مجموعة محددة من خصائص النمط.

مثال 1. تجاوز النص

HTML5 CSS3 IE Cr Op Sa Fx

حجم النص (مسافة بيضاء: nowrap؛ /* إلغاء التفاف النص */ تجاوز السعة: مخفي؛ /* اقتصاص المحتوى */ الخلفية: #fc0؛ /* لون الخلفية */ الحشو: 5 بكسل؛ /* الهوامش */ )

نتيجة هذا المثاليظهر في الشكل. 1.

أرز. 1. مظهر النص بعد تطبيق خاصية التجاوز

كما يتبين من الشكل، هناك عيب واحد بشكل عام - ليس من الواضح أن النص له استمرارية، لذلك يجب أن يكون المستخدم على علم بذلك. ويتم ذلك عادة باستخدام التدرج أو القطع الناقص.

إضافة التدرج إلى النص

لتوضيح أن النص الموجود على اليمين لا ينتهي، يمكنك تراكب تدرج من اللون الشفاف إلى لون الخلفية فوقه (الشكل 2). سيؤدي هذا إلى إنشاء تأثير يذوب النص تدريجيًا.

أرز. 2. نص متدرج

يوضح المثال 2 كيفية إنشاء هذا التأثير. سيظل نمط العنصر نفسه كما هو عمليًا، ولكننا سنضيف التدرج نفسه باستخدام العنصر الزائف ::after وCSS3. للقيام بذلك، نقوم بإدراج عنصر زائف فارغ من خلال خاصية المحتوى ونطبق عليه تدرجًا ببادئات مختلفة للمتصفحات الرئيسية (المثال 2). يمكن تغيير عرض التدرج بسهولة باستخدام width، ويمكنك أيضًا ضبط درجة الشفافية عن طريق استبدال القيمة 0.2 بقيمة خاصة بك.

مثال 2: التدرج على النص

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

حجم النص (مسافة بيضاء: nowrap؛ /* إلغاء التفاف النص */ تجاوز السعة: مخفي؛ /* اقتصاص المحتوى */ الحشو: 5 بكسل؛ /* الهوامش */ الخلفية: #fc0؛ /* لون الخلفية */ الموضع: نسبي ; /* تحديد الموضع النسبي */ ) .size::after ( content: ""; /* عرض العنصر */ الموضع: مطلق; /* تحديد الموضع المطلق */ يمين: 0; أعلى: 0; /* موضع العنصر */ width : 40px; /* عرض التدرج*/ الارتفاع: 100%; /* ارتفاع الوالدين */ /* التدرج */ الخلفية: -moz-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%) الخلفية: -webkit-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); #fc0 100 %)؛ الخلفية: -ms-linear-gradient(left, rgba(255,204,0, 0.2), #fc0 100%); #fc0 100% ));

يقوم صوت تتابعي منفصل بتحويل سلسلة متعددة؛ وهذا عبارة عن مقطع رأسي لمرة واحدة في نسيج متعدد الألحان.

هذه الطريقة لا تعمل في المتصفح متصفح الانترنتحتى الإصدار 8.0 ضمناً، لأنه لا يدعم التدرجات. ولكن يمكنك التخلي عن CSS3 وإجراء التدرج بالطريقة القديمة، من خلال صورة بتنسيق PNG-24.

لا يمكن دمج هذه الطريقة إلا مع خلفية عاديةوفي حالة صورة الخلفية، سيكون التدرج أعلى النص ملحوظًا.

علامة الحذف في نهاية النص

يمكنك أيضًا استخدام علامة الحذف في نهاية النص الذي تم اقتصاصه بدلاً من التدرج. علاوة على ذلك، ستتم إضافته تلقائيًا باستخدام خاصية تجاوز النص. تفهمها جميع المتصفحات، بما في ذلك الإصدارات الأقدم من IE، والعيب الوحيد لهذه الخاصية هو أن حالتها غير واضحة حاليًا. يبدو أن CSS3 يتضمن هذه الخاصية، لكن الكود الموجود بها لا يجتاز التحقق من الصحة.

يوضح المثال 3 استخدام خاصية تجاوز النص مع علامة الحذف للقيمة، والتي تضيف علامة الحذف. عند تحريك مؤشر الفأرة فوق النص، يتم عرضه بالكامل ويتم تمييزه بلون الخلفية.

مثال 3: استخدام تجاوز النص

HTML5 CSS3 IE Cr Op Sa Fx

حجم النص (مسافة بيضاء: nowrap؛ /* إلغاء التفاف النص */ تجاوز السعة: مخفي؛ /* اقتصاص المحتوى */ الحشو: 5 بكسل؛ /* الهوامش */ تجاوز النص: علامات الحذف؛ /* علامات الحذف */ ) .size :hover ( الخلفية: #f0f0f0; /* لون الخلفية */ المسافة البيضاء: عادي; /* التفاف النص العادي */ ) اللاوعي يسبب التباين، وقد تم تحديد هذا بواسطة Lee Ross باعتباره خطأ إسناد أساسي، والذي يمكن رؤيته في العديد من التجارب.

وتظهر نتيجة هذا المثال في الشكل. 3.

أرز. 3. النص مع علامات الحذف

الميزة الكبرى لهذه الطرق هي عدم عرض التدرج وعلامات الحذف إذا كان النص قصيرًا ويتناسب تمامًا مع منطقة معينة. لذلك سيتم عرض النص كالمعتاد عندما يكون مرئيًا بالكامل على الشاشة وسيتم قطعه عندما يتم تقليل عرض العنصر.

سنعرض لك في هذه المقالة 3 تقنيات CSS سريعة وسهلة يمكنك استخدامها لإظهار جزء فقط من الصورة على صفحتك.

جميع الطرق المستخدمة هنا تتطلب في الواقع سطرين فقط CSSشفرة. ولكن هذا ليس ختاناً بالمعنى الحقيقي للكلمة ( CSSلا يمكننا القيام بذلك بعد)، فنحن ببساطة نخفي ونظهر فقط ذلك الجزء من الصورة الذي نريد رؤيته.

يمكن أن تكون هذه التقنيات مفيدة جدًا إذا كنت تريد إحضار الصورة إلى حجم معين، أي أنك تريد، على سبيل المثال، إنشاء معاينة لها (نسخة أصغر من الصورة) في قسم الأخبار أو شيء مشابه.

الأسلوب 1 - استخدام الهوامش السلبية ( هوامش سلبية)

إذا كنت لا ترغب في استخدام الهوامش السلبية، نقترح استخدام التقنية رقم 2. يتضمن الأصل (الفقرة) التي لها عرض وارتفاع محدد. هذه الفقرة لها خاصية التمركزتعيين إلى نسبي. يحدد العرض والارتفاع أبعاد الحقل المعروض. والصورة الموضوعة داخل الفقرة لها الخاصية التمركزتعيين على المطلق. ثم يمكننا استخدام الخصائص قمةو غادرقم بترتيب الصورة كيفما نريد، في عملية تحديد أي جزء من الصورة سيتم عرضه وأي جزء لا يجب إظهاره.

لغة البرمجةمطابق للكود من التقنية السابقة:

< p class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "" / > < / a > < / p >

اقتصاص ( تعويم: اليسار؛ هامِش: . 5م 10 بكسل . 5م 0 ; إخفاء الفائض؛ /* هذا مهم */ الموقف: نسبي؛ /* وهذا مهم أيضًا */ الحدود: 1 بكسل الصلبة #ccc؛ العرض: 200 بكسل؛ الارتفاع: 120 بكسل؛ اقتصاص الصورة ( الموقف: مطلق؛ أعلى: - 40 بكسل؛ اليسار : - 50 بكسل ;

التقنية 3 - استخدام خاصية التقطيع ( خاصية المقطع)

يجب أن تكون هذه التقنية هي الأسهل منذ ذلك الحين خاصية المقطعيحدد جزء العنصر الذي يجب أن يظهر. يبدو هذا حلاً مثاليًا، لكنه موجود صيد واحد: العنصر المقطوعيجب أن يتم وضعه على الاطلاق. لكي نتمكن من استخدام العنصر، سيتعين علينا إضافة عنصر إضافي، احسب حجم المنطقة المرئية من الصورة، أضف هذا الحجم إلى الأصل، استخدم الأصل... هناك الكثير من العمل، أليس كذلك؟

أوه، هناك مشكلة أخرى: لا يتم تقليل حجم العنصر الذي تم اقتصاصه إلى حجم الاقتصاص، ولكنه يظل بالحجم الأصلي (الصورة خارج الاقتصاص مخفية ببساطة). يجب علينا استخدام الموضع المطلق لتحريك المنطقة المرئية إلى الزاوية اليسرى العليا من الأصل.

ومع ذلك، لا يمكن تركها دون ذكرها خاصية التقطيع. وهكذا الكود مرة أخرى ...

< div class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "قالب المغلق" / > < / a > < / div >

مرحبًا بالجميع، اسمي آنا بلوك واليوم سنتحدث عن كيفية قص الصور دون استخدام برامج الرسومات.

أين يمكن أن يكون هذا مفيدًا؟

بادئ ذي بدء، على المواقع التي من المرجح ألا يتم اقتصاص المحتوى الذي يحتوي على صور لأي كتلة محددة.

مثال صارخ: مدونة على WordPress.

لنفترض أنك تريد أن يكون لغلاف مقالتك نسبة عرض إلى ارتفاع تبلغ 1:1 (مربع). أفعالك:

قم بتنزيل الصورة المناسبة من الإنترنت؛

قم بقصه في Photoshop إلى النسب المطلوبة؛

نشر مقال.

عند زيارتك للموقع سوف ترى النتيجة التي توقعتها.

لكن لنفترض أنك نسيت قص الصورة بالفوتوشوب وقمت بتنزيل صورة عشوائية كغلاف من الإنترنت، فماذا سيحدث بعد ذلك؟! هذا صحيح، سوف ينكسر التصميم. وإذا لم تكن قد استخدمت CSS على الإطلاق، فيمكن للصورة عالية الدقة أن تمنع عرض النص بالكامل. لذلك، من المهم أن تكون قادرًا على اقتصاص الصور متى مساعدة في CSSالأنماط.

دعونا نلقي نظرة على مواقف مختلفة لكيفية تنفيذ ذلك ليس فقط باستخدام CSS، ولكن أيضًا باستخدام SVG.

مثال 1

دعونا نحاول اقتصاص الصورة التي تم وضعها باستخدام صورة الخلفية. لنقم بإنشاء علامة HTML صغيرة

دعنا ننتقل إلى تصميم CSS. باستخدام صورة الخلفية، نضيف صورة، ونحدد الإطارات لصورتنا، ونركز الصورة باستخدام موضع الخلفية ونضبط حجم الخلفية:

JPG)؛ موقف الخلفية: مركز المركز؛ حجم الخلفية: الغلاف؛ العرض: 300 بكسل؛ الارتفاع: 300 بكسل؛ )

كانت هذه هي الطريقة الأولى والأبسط لاقتصاص الصورة. الآن دعونا نلقي نظرة على المثال الثاني.

مثال 2

لنفترض أنه لا يزال لدينا نفس حاوية الصندوق التي يوجد بداخلها علامة img مع صورة سنقوم الآن بتصميمها.

سنقوم أيضًا بتوسيط صورتنا بالنسبة للكائن الذي سنقوم بإنشائه. ونحن نستخدم خاصية نادرًا ما يتم استخدامها: object-fit .

Box ( الموضع: نسبي؛ الفائض: مخفي؛ العرض: 300 بكسل؛ الارتفاع: 300 بكسل؛ ) .box img ( الموضع: مطلق؛ أعلى: 50%؛ يسار: 50%؛ تحويل: ترجمة (-50%، -50%))؛ العرض: 300 بكسل؛ الارتفاع: 300 بكسل؛

في رأيي هذا هو أفضل أسلوب. إنه مثالي للمدونات إذا كنت تستخدم صورًا ذات أبعاد مختلفة تمامًا للمشاركات.

يمكنك معرفة المزيد عن HTML وCSS هنا:

مثال 3

يمكننا أيضًا إنشاء اقتصاص للصور في الوقت الحالي إذا قمنا بإدراجها في عناصر SVG. لنأخذ دائرة كمثال. يمكننا إنشاء SVG باستخدام العلامات. قم بإنشاء علامة حدود svg تحتوي على علامة دائرة وعلامة نمط بداخلها. في علامة النمط نكتب علامة الصورة. نحدد فيه سمة xlink:href ونضيف صورة. سنضيف أيضًا سمات العرض والارتفاع. ولكن هذا ليس كل شيء. سنحتاج إلى إضافة قيمة التعبئة. لكي يعتبر عملنا مكتملًا، سنضيف السمة المساعدة keepAspectRatio إلى علامة الصورة، والتي ستسمح لنا بملء صورتنا "من البداية إلى النهاية" حول الدائرة بأكملها.

لا أستطيع أن أسمي هذه الطريقة عالمية. ولكن يمكن استخدامه في حالات استثنائية. على سبيل المثال، إذا لمسنا موضوع المدونة، فيمكن أن تتناسب هذه الطريقة بشكل مثالي مع الصورة الرمزية للمؤلف الذي يكتب المقال.

يمكنك معرفة المزيد عن HTML وCSS هنا:

نتائج:
لقد نظرنا إلى 3 طرق لاقتصاص الصور على مواقع الويب: استخدام صورة الخلفية، واستخدام علامة img وربطها بنمط svg مع التضمين الصور النقطيةباستخدام علامة الصورة. إذا كنت تعرف أي طرق أخرى لاقتصاص صورة باستخدام SVG، فقم بمشاركتها في التعليقات. سيكون من المفيد ليس فقط بالنسبة لي، ولكن أيضًا للآخرين أن يعرفوا عنها.

لا تنس أن تطرح أسئلتك حول التخطيط أو تطوير الواجهة الأمامية من المتخصصين في FrontendHelp عبر الإنترنت.

يمكن إضافة علامة القطع في نهاية النص بعدة طرق، وهي متاحة لنا باستخدام CSS وJS.

أولا، دعونا ننظر إلى المشكلة. هناك علامات كتلة

• الكثير من النصوص المثيرة للاهتمام حول الأنماط والتخطيط والبرمجة والعديد من الأشياء المثيرة للاهتمام حول مواقع الويب


• ولكن كيف يمكننا وضع علامة القطع إذا لم نتمكن من تحديد حجم الكتلة؟


• ماذا عن البرنامج النصي JS؟ يمكنه فعل هذا، أليس كذلك؟


• حسنًا، يمكن ذلك بالتأكيد. هنا، احتفظ بالرمز، وسيحسب أحرف Unicode ويقطعها إذا لزم الأمر

أنت الآن بحاجة إلى تحقيق تأثير قطع النص في كل عنصر من عناصر القائمة، بالإضافة إلى ذلك تحتاج إلى إضافة علامة القطع.

تقليم نص CSS

للقيام بذلك، دعونا ننشئ نمطًا لفئة الحلمة
.الحلمة(
المساحة البيضاء: nowrap؛ /* إلغاء التفاف النص */
إخفاء الفائض؛ /* تقليم المحتويات */
الحشو: 5 بكسل؛ /* مجالات */
تجاوز النص: القطع الناقص؛ /* علامة الحذف */
}

تكمن خصوصية هذا الحل في أنه إذا كان النص مناسبًا لحجم الكتلة، فلن تتم إضافة علامة الحذف. وهو ليس دائما الحل للمشكلة.

في أغلب الأحيان، تحتاج إلى قطع النص إلى طوله ثم إضافة نقاط فقط.
هناك أيضًا مهام عندما يكون من الضروري إضافة فترات في أي حال (بغض النظر عن طول النص، على الأقل 3 أحرف). وإذا كان النص أطول من حجم معين، فيجب قصه. في هذه الحالة، فمن الضروري استخدام البرامج النصية.

نقوم بقص النص وفقًا لعدد الأحرف ونضيف علامة حذف بغض النظر عن طوله

عنوان الوظيفة () (
فار العنصر، الحجم، النص؛
var elem = document.getElementsByClassName("tit");
نص فار = elem.innerHTML؛
حجم فار = 75؛
فار ن = 70؛
ل(فار ط = 0؛ ط< elem.length; i++) { /* необходимо вставить цикл, чтоб получить все блоки с классом tit */
إذا (elem[i].innerHTML.length > الحجم) (
text = elem[i].innerHTML.substr(0,n);
}
آخر(
text = elem[i].innerHTML;
}
elem[i].innerHTML = text + "...";
}
}
عنوان()؛

ماذا نفعل؟

نخبر البرنامج النصي بالعناصر التي يجب معالجتها.
للقيام بذلك، في السطر var elem = document.getElementsByClassName("tit"); حدد فئة العنصر (يجب أن يكون هو نفسه).

ستحتاج بعد ذلك إلى ضبط حجم النص قبل قصه. هذه هي خطوطنا القصيرة التي سيتم إضافة علامة الحذف إليها. المتغير var size = 75 هو المسؤول عن ذلك؛

الآن يجب أن يمر البرنامج النصي عبر جميع العناصر ذات الفئة المطلوبة وإضافة علامة القطع.
يتحقق البرنامج النصي من طول كل سطر ويقتطع النص إذا تجاوز 75 حرفًا. إذا كان الطول أقل، فسيتم ببساطة إضافة علامة القطع (السطر if(elem[i].innerHTML.length > size)).

يمكنك رؤية البرنامج النصي قيد التنفيذ على الصفحة التجريبية. هذا كل شيء، الآن أنت تعرف كيفية قص النص الطويل باستخدام طرق مختلفة.

يوجد نص بطول عشوائي يجب عرضه داخل كتلة ذات ارتفاع وعرض ثابتين. في هذه الحالة، إذا لم يتم احتواء النص بالكامل، فيجب عرض جزء من النص الذي يتناسب تمامًا مع الكتلة المحددة، وبعد ذلك يتم تعيين علامة القطع.

هذه المهمة شائعة جدًا، لكنها في الوقت نفسه ليست تافهة كما تبدو.

خيار نص سطر واحد في CSS

في هذه الحالة، يمكنك استخدام خاصية تجاوز النص: علامة القطع. في هذه الحالة، يجب أن تحتوي الحاوية على الخاصية تجاوزمتساوي مختفيأو مقطع

كتلة (العرض: 250 بكسل؛ مسافة بيضاء: nowrap؛ تجاوز السعة: مخفي؛ تجاوز النص: علامات الحذف؛)

خيار النص متعدد الأسطر في CSS

الطريقة الأولى لقص النص متعدد الأسطر هي استخدام خصائص CSSتطبيق العناصر الزائفة :قبلو :بعد. لنبدأ بترميز HTML

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam noummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. من الحكمة أن لا نمارس أي تمرين من خلال ممارسة التمارين الرياضية التي نمارسها. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis at vero eros et Accumsan and iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

والآن الخصائص نفسها

المربع (التجاوز: مخفي؛ الارتفاع: 200 بكسل؛ العرض: 300 بكسل؛ ارتفاع الخط: 25 بكسل؛) .box: قبل (المحتوى: ""؛ تعويم: يسار؛ العرض: 5 بكسل؛ الارتفاع: 200 بكسل ; ) .box > * :أولًا -الطفل (طفو: يمين؛ العرض: 100%؛ الهامش الأيسر: -5 بكسل؛) .box: بعد (المحتوى: "\02026"؛ حجم الصندوق: مربع المحتوى؛ تعويم: يمين؛ الموضع: نسبي؛ أعلى: -25 بكسل؛ العرض: 3em؛ حجم الخلفية: 5 بكسل؛ 100% 100% (255، 255، 255، 0)، أبيض 50%؛

هناك طريقة أخرى وهي استخدام خاصية عرض العمود، والتي من خلالها نقوم بتعيين عرض العمود للنص متعدد الأسطر. ومع ذلك، عند استخدام هذه الطريقة، لن يكون من الممكن تعيين علامة حذف في النهاية. لغة البرمجة:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam noummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. من الحكمة أن لا نمارس أي تمرين من خلال ممارسة التمارين الرياضية التي نمارسها. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis at vero eros et Accumsan and iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

كتلة ( تجاوز: مخفي؛ الارتفاع: 200 بكسل؛ العرض: 300 بكسل ; ) .block__inner ( -webkit-column-width: 150px ; -moz-column-width : 150px ; عرض العمود: 150px ; الارتفاع: 100% ; )

الطريقة الثالثة لحل النص متعدد الأسطر باستخدام CSS هي لمتصفحات Webkit. سيتعين علينا فيه استخدام العديد من الخصائص المحددة مع البادئة -webkit. الرئيسي هو -webkit-line-clamp الذي يسمح لك بتحديد عدد الخطوط التي سيتم إخراجها في كتلة. الحل جميل ولكنه محدود نوعاً ما نظراً لعمله في مجموعة محدودة من المتصفحات

كتلة ( تجاوز السعة: مخفي؛ تجاوز النص: القطع الناقص؛ العرض: -webkit-box؛ -webkit-line-clamp: 2؛ -webkit-box-orient: عمودي؛)

خيار النص متعدد الأسطر في JavaScript

هنا يتم استخدام كتلة إضافية غير مرئية، حيث يتم وضع النص الخاص بنا في البداية، وبعد ذلك تتم إزالة حرف واحد في كل مرة حتى يصبح ارتفاع هذه الكتلة أقل من أو يساوي ارتفاع الكتلة المطلوبة. وفي النهاية يتم نقل النص إلى الكتلة الأصلية.

كتلة فار = document.getElementById("block"); querySelector(".block"), text = block. الداخليHTML، استنساخ = document.getElementById("class"); createElement("div"); استنساخ أسلوب. الموضع = "المطلق" ؛ استنساخ أسلوب. الرؤية = "مخفية"؛ استنساخ أسلوب. العرض = الكتلة . عرض العميل + "بكسل" ; استنساخ HTML الداخلي = نص ; وثيقة. جسم. appendChild(clone); فار ل = نص . الطول - 1 ; for (; l >= 0 && clone .clientHeight > block .clientHeight ; -- l ) ( clone . InternalHTML = text . substring ( 0 , l ) + "..." ; ) block . InnerHTML = استنساخ . HTML داخلي؛

هذا هو نفس البرنامج المساعد لـ jQuery:

(وظيفة ($ ) ( var truncate = function (el ) ( var text = el . text ()، height = el . height ()، clone = el . clone ()؛ clone . css ((position : "absolute" , الرؤية: "مخفي"، الارتفاع: "تلقائي" )); (clone . text ( text . substring ( 0 , l ) + "..." ); el . text ( clone . Remove ( ) ) ); ( إرجاع هذا . every (function () ( truncate ( $ ( this )); ));