اذهب إلى المحتوى
  • 1

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

Najah Alsaker

السؤال

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

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

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

Recommended Posts

  • 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;
}

 

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...