ویژگی text-overflow مشخص می‌کند که محتوای اضافی که در عنصر جا نمی‌شود به چه شکل نمایش داده شود. این ویژگی می‌تواند محتوای اضافی را ببرد (clip) یا به صورت سه‌نقطه (ellipsis) نمایش دهد.
مثال‌ها:
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 {
overflow: visible; /* محتوای اضافی را هنگام هاور کردن نمایش بده */
}CSS Word Wrapping
ویژگی word-wrap مشخص می‌کند که آیا کلمات بلند می‌توانند به خط بعدی بشکنند یا خیر. اگر یک کلمه خیلی طولانی باشد و جا نشود، معمولاً از باکس خارج می‌شود. با استفاده از word-wrap می‌توان به مرورگر گفت که کلمه را بشکند و در خط بعدی ادامه دهد.
مثال:
p {
word-wrap: break-word; /* شکستن کلمات بلند */
}CSS Word Breaking
ویژگی word-break برای تعیین قوانین شکستن خطوط استفاده می‌شود. این ویژگی مشخص می‌کند که چگونه مرورگر باید کلمات یا کاراکترها را در خطوط مختلف قرار دهد.
مثال‌ها:
p.test1 {
word-break: keep-all; /* شکستن کلمات را فقط در نقاط مجاز انجام بده */
}
p.test2 {
word-break: break-all; /* در هر نقطه‌ای که جا نباشد، کلمه را بشکن */
}CSS Writing Mode
ویژگی writing-mode مشخص می‌کند که متن به صورت افقی یا عمودی نمایش داده شود.
مثال‌ها:
p.test1 {
writing-mode: horizontal-tb; /* نوشتن افقی از چپ به راست */
}
span.test2 {
writing-mode: vertical-rl; /* نوشتن عمودی از راست به چپ */
}
p.test2 {
writing-mode: vertical-rl; /* نوشتن عمودی از راست به چپ */
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام