كيف اعرض جزء من النص

يمكنك إستخدام الكود التالى :

فى ملف ال html 

<p id="text-p">This is a paragraph Test Test Test.</p>

هنا قمنا بإنشاء عنصر وقد أعطينا له id مخصص يساوى text-p .

والآن فى كود js 

let p = document.getElementById('text-p');
let text = p.innerText;
const textShort = `${text.substr(0,7)} ...`
p.innerText = textShort;

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

والآن أنشئنا متغير جديد يحوى النص المختصر وأعطينا قيمته `${text.substr(0,7)} ...`  حيث هنا إستخدمنا الدالة substr وهى تقوم بأخذ جزء معين من النص وقمنا بتحديد 0 و 7 أى أننا نريد أن نأخذ من النص من أول حرف إلى الحرف رقم 7 مع إحتساب المسافات من ضمن النص ومن ثم وضع ثلاثة نقاط بعد النص أو أى شئ تريده .

لذلك إذا أردت عدد أحرف معين قم فقط بتغير رقم 7 إلى الرقم الذى تريده .

وأخيرنا قمنا بإسناد تلك القيمة إلى الخاصية innerText وبذلك سيتم إستبدال النص الحالى بالنص الجديد الذى هو جزء من النص الأساسي

ما تريده يمكن تنفيذه من خلال CSS فقط، بحيث إذا زاد النص عن حجم العنصر الأب له يتم عرض نقاط ellipsis.

والأمر يتم من خلال خاصية text-overflow ووضع قيمة ellipsis لها، ثم استخدام خاصية  white-space بقيمة nowrap لمنع نزول النص إلى سطر جديد عند عدم وجود مساحة.

أيضًا خاصية overflow بقيمة hidden لإخفاء النص الزائد عن مساحة العنصر الأب.

 كالتالي:

 <style>

    div.b {
  white-space: nowrap; 
  width: 50px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  border: 1px solid #000000;
}
  </style>
  
  <h2>text-overflow: ellipsis:</h2>
<div class="b">Hello world!</div>