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

لتحديد عدد الأسطر ل 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);

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

يمكنك استخدام 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;
}