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

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

Zerious San

السؤال

Recommended Posts

  • 1

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

فى ملف ال 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 وبذلك سيتم إستبدال النص الحالى بالنص الجديد الذى هو جزء من النص الأساسي

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

  • 0

ما تريده يمكن تنفيذه من خلال 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>

 

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...