תיעוד ודוגמאות עבור כלי עזר נפוצים לטקסט לשליטה ביישור, גלישה, משקל ועוד.
יישור טקסט
יישר מחדש בקלות טקסט לרכיבים עם מחלקות יישור טקסט.
אמביציונלי ותסריט כתיבה. Cras mattis iudicium purus sit amet fermentum. Donec sed ofdio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. ב-nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in dim certam indicere. Cras mattis iudicium purus sit amet fermentum.
ליישור שמאל, ימין ומרכז, זמינות מחלקות רספונסיביות המשתמשות באותן נקודות עצירה ברוחב של שדה התצוגה כמו מערכת הרשת.
טקסט מיושר לשמאל בכל גדלי התצוגה.
טקסט מיושר במרכז בכל גדלי יציאת התצוגה.
טקסט מיושר לימין בכל גדלי התצוגה.
טקסט מיושר לשמאל ביציאות תצוגה בגודל SM (קטן) או רחב יותר.
טקסט מיושר לשמאל ביציאות תצוגה בגודל MD (בינוני) או רחב יותר.
טקסט מיושר לשמאל ביציאות תצוגה בגודל LG (גדול) או רחב יותר.
טקסט מיושר לשמאל ביציאות תצוגה בגודל XL (אקסטרה-large) או רחב יותר.
עטיפת טקסט והצפת טקסט
עטוף טקסט עם .text-wrapכיתה.
הטקסט הזה צריך לעטוף.
מנע את גלישת הטקסט .text-nowrapבכיתה.
הטקסט הזה צריך להציף את ההורה.
לתוכן ארוך יותר, אתה יכול להוסיף .text-truncateמחלקה כדי לקצץ את הטקסט באליפסיס. דורש display: inline-blockאו display: block.
Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.
הפסקת מילים
מנע מחרוזות ארוכות של טקסט לשבור את פריסת הרכיבים שלך על ידי שימוש ב- .text-breakto set overflow-wrap: break-word(ולצורך word-break: break-wordתאימות IE ו-Edge).
מממממממממממממממממממממממממממממממממממממממממממממממממ
שינוי טקסט
הפוך טקסט ברכיבים עם מחלקות רישיות טקסט.
טקסט באותיות קטנות.
טקסט באותיות גדולות.
טקסט עם רישיות.
שים לב כיצד .text-capitalizeמשנה רק את האות הראשונה של כל מילה, ומשאיר את האותיות האותיות לא מושפעות.
משקל גופן ונטוי
שנה במהירות את המשקל (הדגשה) של טקסט או טקסט נטוי.
טקסט מודגש.
טקסט משקל מודגש יותר (ביחס לאלמנט האב).
טקסט במשקל רגיל.
טקסט קל משקל.
טקסט קל יותר (ביחס לאלמנט האב).
טקסט נטוי.
מונוספייס
שנה בחירה לערימת הגופנים המונוספייס שלנו עם .text-monospace.
זה במונוספייס
אפס צבע
אפס את הצבע של טקסט או קישור באמצעות .text-reset, כך שהוא יורש את הצבע מהאב שלו.