• 1

إظهار 3 نقاط في نهاية السطر الطويل عبر css

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

هذه الخاصيات نضيفها لاظهار النص على سطر واحد ومايتبقى يظهر عوضا عنه 3 نقاط  ولكن ماذا لو انني اريد اظهار اكثر من سطر مثلا 4 سطور ومن ثم الثلاث نقاط كيف ذلك

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

لتحديد عدد الأسطر ل text area يمكن من خلال HTML:

<textarea rows="4" cols="50"></textarea>

كما يمكن من خلال CSS:

<textarea class="comments"></textarea>

.comments { width: 300px; height: 75px }

أو بالمجمل:

<textarea rows="4" cols="50">
  
textarea {
  resize: none;
  white-space: nowrap;
  overflow-x: scroll; /* or hidden */
}

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

function add3Dots(string, limit)
{
  let dots = "...";
  if(string.length > limit)
  {
    string = string.substring(0,limit) + dots;
  }

  return string;
}

والإستدعاء:

add3Dots("Hello World xxxxxxxxx",9);

يمكنك استخدام الدالة هذه لقص أي نص واستعمال ناتجها في أي جزء من المشروع

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

يمكنك استخدام line clump

<div class="box">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
.box p {
  display: -webkit-box;
  -webkit-line-clamp: 3; // الرقم هنا هو عدد الأسطر المراد اظهارها
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن