الالتفاف وقص النص بالنقاط | أدوات النصوص والروابط في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عند عرض عناوين مقالات ديناميكية أو روابط معرّفات طويلة داخل أعمدة ضيقة، قد يفيض النص خارج إطار البطاقة ويشوّه التخطيط الأفقي للصفحة. يعالج بوتستراب هذه المشكلة بأربع أدوات دقيقة: .text-wrap للسماح بالالتفاف الطبيعي، و.text-nowrap لمنع انكسار السطر داخل الشارات القصيرة، و.text-break لكسر السلاسل المتصلة الطويلة مثل عناوين الروابط عبر خاصيتي word-wrap: break-word وword-break: break-word.

أما لاختصار العناوين الطويلة في سطر واحد منتهٍ بثلاث نقاط أنيقة ... فنستخدم الكلاس .text-truncate، مع تذكّر أنه يشترط عنصراً كتلياً display: block أو .d-inline-block مقيداً بعرض صريح مثل .col-7.

الصف 2 كود برمجي

HTML

<div class="row">
  <div class="col-6 text-truncate border p-2 mb-2">
    This long dashboard report title truncates cleanly
  </div>
</div>
<p class="text-break border p-2 bg-body-tertiary">
  https://example.com/very-long-unbroken-verification-token
</p>

جرّب بنفسك

الصف 3 ملاحظة هامة

Wrapping and Text Truncate الالتفاف وقص النص بالنقاط

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (أدوات النصوص والروابط في بوتستراب 5)