دون مزيد من اللغط، لنبدأ بالرمز!
1. اعرض سطرًا واحدًا فقط من النص ثم قم بإخفائه وحذفه
// اعرض سطرًا واحدًا فقط من النص ثم احذف .element {
العرض: 300 بكسل؛ /* تحتاج إلى ضبط عرض ثابت */
مسافة بيضاء: nowrap /* فرض عرض سطر واحد بدون التفاف الخط */
الفائض: مخفي /* إخفاء الجزء الموجود خارج الصندوق */
تجاوز النص: علامات الحذف /* عرض علامات الحذف الزائدة */
}2. قم بعرض العدد المحدد من أسطر النص ثم قم بإخفائه وحذفه.
// احذف بعد عرض text.element متعدد الأسطر {
العرض: 300 بكسل؛ /* تحتاج إلى ضبط عرض ثابت */
العرض: -webkit-box /* استخدم تخطيط الصندوق المرن */
-webkit-box-orient: عمودي /* الترتيب الرأسي */
-webkit-line-clamp: 3; /* عرض ثلاثة أسطر */
الفائض: مخفي /* إخفاء الجزء الموجود خارج الصندوق */
تجاوز النص: علامات الحذف /* عرض علامات الحذف الزائدة */
} يتم حذف النص متعدد الأسطر باستخدام display: -webkit-box; وتخطيط المربع المرن و- -webkit-line-clamp لتحقيق اقتطاع النص متعدد الأسطر.
ملاحظة: هذه الطريقة مناسبة لمتصفحات WebKit الأساسية (مثل Chrome وSafari وما إلى ذلك). بالنسبة للمتصفحات الأخرى، قد يكون هناك حاجة إلى دعم إضافي للتعبئة المتعددة.
حلول أخرى
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.5 ملم /* الحد الأقصى للارتفاع 3 خطوط، 3 خطوط * ارتفاع 1.5 = 4.5 ملم */
المسافة البيضاء: عادية /* الحفاظ على التفاف النص العادي */
}على الرغم من أن هذا النظام لا يمكنه تحقيق اقتطاع دقيق متعدد الأسطر في جميع الحالات، إلا أنه لا يزال مناسبًا لدعم عرض إغفال النص الأساسي متعدد الأسطر.
بهذا نختتم هذه المقالة حول إخفاء علامات الحذف وعرضها بعد تجاوز نص CSS الحد وحلول التوافق الأخرى للمتصفح. لمزيد من المعلومات ذات الصلة بنص CSS الذي يتجاوز المحتوى المخفي، يرجى البحث في المقالات السابقة على موقع downcodes.com أو متابعة تصفح المقالات ذات الصلة أدناه نأمل أن تدعم downcodes.com أكثر في المستقبل!