كيفية تحديد سطور النص باستخدام CSS فقط

الحد من كمية النص في عنصر هو مطلب شائع لتصميم الويب. ستشاهد غالبًا مقالة تحتوي على مقتطف من ثلاثة أو أربعة أسطر مع زر يتيح لك توسيع النص الكامل.

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

تقنية Webkit

قم بإنشاء مجلد فارغ وقم بتحرير ملفين بداخله: index.html و style.css. داخل index.html ملف ، قم بإنشاء هيكل HTML:

لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<عنوان>وثيقةعنوان>
<وصلةrel="ورقة الأنماط"href="style.css">
رأس>
<جسم>
جسم>
لغة البرمجة>

رابط في قسم إلى style.css ، يضمن أن أي CSS تضيفه إلى هذا الملف سيتم تطبيقه على هذه الصفحة. بعد ذلك ، الصق ترميز HTML التالي داخل ملف العلامات في index.html:

<قسمفصل="مجموعة البطاقات">
<شرطفصل="بطاقة">
<h2>المادة 1h2>
<صفصل="قطع النص">
 يوجد نص مكون من 300 كلمة هنا
ص>
<مدخليكتب="مربع الاختيار"فصل="توسيع- btn">
شرط>
<شرطفصل="بطاقة">
<h2>المادة 2h2>





instagram viewer

<صفصل="قطع النص">
 يوجد نص مكون من 200 كلمة هنا
ص>
<مدخليكتب="مربع الاختيار"فصل="توسيع- btn">
شرط>
<شرطفصل="بطاقة">
<h2>المادة 1h2>
<صفصل="قطع النص">
 يوجد نص مكون من 100 كلمة هنا
ص>
<مدخليكتب="مربع الاختيار"فصل="توسيع- btn">
شرط>
قسم>

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

في غضون ذلك ، ستبدو صفحتك على النحو التالي:

من الصورة أعلاه ، يمكنك رؤية أطوال مختلفة للنص في كل فقرة. 300 كلمة في الأول و 200 كلمة في الثانية و 100 في الثالثة.

الخطوة التالية هي بدء تصميم الصفحة عن طريق إضافة CSS إلى ملف style.css ملف. ابدأ بإعادة تعيين الحد على المستند وإعطاء الجسم لون خلفية أبيض:

*, *::قبل, *::بعد {
تحجيم الصندوق: مربع الحدود;
}
جسم {
خلفية: # f3f3f3;
تجاوز: مختفي;
}

بعد ذلك ، قم بتحويل العنصر الذي يحتوي على فئة مجموعة البطاقات إلى حاوية شبكة بثلاثة أعمدة. يحتل كل قسم مقال عمودًا:

.card-group {
عرض: شبكة;
شبكة-قالب-أعمدة: يكرر(3, 1الاب);
فجوة: .5rem;
محاذاة العناصر: بداية مرنة;
}

صمم كل قسم من أقسام المقالات على هيئة بطاقة ذات خلفية بيضاء وحدود سوداء مستديرة قليلاً:

.بطاقة {
خلفية: أبيض;
حشوة: 1rem;
حدود: 1مقصفصلبأسود;
نصف قطر الحد: .25em;
}

أخيرًا ، أضف بعض الهوامش:

h2, ص {
هامِش: 0;
}
h2 {
الهامش السفلي: 1rem;
}

احفظ الملف وتحقق من متصفحك. يجب أن تظهر الصفحة في الصفحة الموضحة في الصورة أدناه:

الخطوة التالية هي قطع عدد الأسطر لكل نص إلى 3. إليك CSS لذلك:

.cuttoff-text {
- ماكس الخطوط: 3; 
تجاوز: مختفي;

عرض: -صندوق ويب; 
-webkit-box-orient: رَأسِيّ;
-webkit- خط- المشبك: فار(- ماكس الخطوط);
}

ابدأ بالإعداد متغير CSS، max-lines ، إلى 3 وإخفاء المحتوى الفائض. ثم اضبط العرض على -صندوق ويب وشبك الخط إلى 3.

الصورة التالية تظهر النتيجة. تعرض كل بطاقة قطع ناقص على السطر الثالث من النص:

يمكن أن تكون هذه التقنية صعبة للغاية. إذا قمت بحذف أي خاصية ، فسوف ينكسر كل شيء. عيب آخر هو أنه لا يمكنك استخدام خاصية عرض بخلاف - صندوق ويب. على سبيل المثال ، قد ترغب في ذلك استخدم Grid أو Flexbox. لهذه الأسباب ، فإن التقنية التالية أفضل.

نهج أكثر مرونة للحد من عدد الأسطر في النص

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

للبدء ، استبدل كتلة CSS لـ .cutoff-text مع هذا:

.cuttoff-text {
- ماكس الخطوط: 5;
--ارتفاع خط: 1.4;
ارتفاع: احسب(فار(- ماكس الخطوط) * 1م * فار(--ارتفاع خط));
ارتفاع خط: فار(--ارتفاع خط);
موضع: نسبي;
}

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

نضيف الموقف: نسبي الخاصية لأننا نحتاجها لإضافة تأثير التلاشي. أضف CSS التالية لإكمال التأثير:

.cuttoff-text::قبل {
محتوى: "";
موضع: مطلق;
ارتفاع: احسب(2م * فار(--ارتفاع خط));
عرض: 100%;
قاع: 0;
مؤشر الأحداث: لا أحد;
خلفية: الخطي التدرج(لقاع, شفاف, أبيض);
}

يطمس CSS أعلاه السطر الأخير من النص في كل بطاقة. يمكنك تحقيق تأثير يتلاشى باستخدام خلفية الملكية والتدرج. يجب عليك تعيين مؤشر الأحداث ل لا أحد للتأكد من أن العنصر غير قابل للتحديد.

ها هي النتيجة:

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

إضافة زر توسيع وطي ديناميكي

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

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

.expand-btn {
مظهر: لا أحد;
حدود: 1مقصفصلبأسود;
حشوة: .5em;
نصف قطر الحد: .25em;
المؤشر: المؤشر;
الهامش العلوي: 1rem;
}

عندما تحوم فوق الزر ، فأنت تريد تغيير لون الخلفية:

.expand-btn:يحوم {
لون الخلفية: #ccc;
}

الآن CSS لتبديل النص عند التحقق من الإدخال:

.expand-btn::قبل {
محتوى: "يوسع"
}
.expand-btn:التحقق::قبل {
محتوى: "ينهار"
}

الآن عند النقر فوق الزر / الإدخال ، ينتقل النص من يوسع ل ينهار. لكن المحتوى نفسه لن يتوسع بعد. للقيام بذلك عند النقر فوق الزر ، أضف CSS التالية:

.cuttoff-text: has (+.expand-btn:التحقق) {
ارتفاع: آلي;
}

هذا المثال يستخدم has () محدد CSS لاستهداف العنصر. باستخدام هذا الرمز ، أنت تقول أنه إذا كانت منطقة النص المقطوع بها زر توسيع محدد ، فيجب أن يكون ارتفاع البطاقة آلي (الذي يوسعها).

ها هي النتيجة:

نصائح وحيل CSS أخرى للتعلم

توضح هذه المقالة طريقتين مختلفتين للحد من عدد الأسطر في المربع باستخدام CSS. حتى أننا أضفنا زرًا لتوسيع / ​​تصغير المحتوى دون كتابة سطر واحد من JavaScript.

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