متن در CSS3
یادگیری CSSدر 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;
}
مشاهده مثال
نظر شما
>