در css3 ویژگی های جدیدی برای متن ها وجود دارد. در این درس درباره صفات زیر یاد خواهید گرفت :

• text-overflow
• word-wrap
• word-break

اضافات متن

صفت text-overflow در css3 نحوه چگونگی نمایش اضافات نمایش داده نشده متن به کاربر را مشخص می کند.
متن ، هم می تواند بریده شود و هم با نقطه هایی جاافتادگی آن اعلام شود. کدهای این اعمال به شرح زیر است.

مثال :

p.test1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip; 
}

p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis; 
}

در مثال زیر نمایش داده شده است که چگونه اضافات نمایش داده نشده را به هنگام اشاره با ماوس نشان دهیم.

مثال :

div.test:hover {
    text-overflow: inherit;
    overflow: visible;
}

بسته بندی کلمات در css3

صفت word-wrap در css3 این امکان را فراهم می کند تا کلماتی که بسیار طولانی هستند ، محدوده محتوا را به هم نزند و به ادامه آن به سطر بعد منتقل شود.
اگر یک کلمه به حدی طولانی باشد که در محدوده محتوا جای نگیرد ، به خارج از محدوده گسترده می شود.
با استفاده از صفت word-wrap کلمه مورد نظر را به اجبار در داخل محدوده نگه می داریم، حتی اگر کلمه به دو قسمت تقسیم شود.

کد های css برای این مورد به شرح زیر می باشد.

مثال :

p {
    word-wrap: break-word;
}

شکسته شدن کلمات در css3

صفت word-break قواعد شکستن خطوط را مشخص می کند.

کدهای css این مورد به شرح زیر است.

مثال :

p.test1 {
    word-break: keep-all;
}

p.test2 {
    word-break: break-all;
}