تأثیرات متن CSS
- صفحه قبلی ت_SHADOW جعبه CSS
- صفحه بعدی فونتهای شبکهای CSS
CSS خروجی متن، تغییر خطوط کامل، قوانین خطبری و سبک نوشتار
در این فصل، شما موارد زیر را یاد خواهید گرفت:
text-overflow
word-wrap
word-break
writing-mode
CSS خروجی متن
CSS text-overflow
این ویژگیها تعیین میکنند که چگونه محتوای اضافی که نمایش داده نمیشود به کاربر نمایش داده شود.
میتواند برش داده شود:
این یک متن بلند است که نمیتواند در جعبه قرار گیرد. این یک متن بلند است که نمیتواند در جعبه قرار گیرد
همچنین میتوان آن را به صورت نقاط (...) نشان داد:
این یک متن بلند است که نمیتواند در جعبه قرار گیرد. این یک متن بلند است که نمیتواند در جعبه قرار گیرد
کد CSS به شرح زیر است:
مثال
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)
CSS word-wrap
ویژگیای است که به طولانی بودن نوشتار اجازه میدهد تا شکسته و به خط بعدی منتقل شود.
اگر یک کلمه خیلی بلند باشد و نتواند در یک منطقه قرار گیرد، به بیرون از محدوده میافتد:
این پاراگراف شامل یک کلمه بسیار بلند است: thisisaveryveryveryveryveryverylongword. کلمه بلند شکسته و به خط بعدی منتقل میشود.
با استفاده از ویژگی word-wrap، میتوانید به زور خطوط نوشتار را شکسته کنید - حتی اگر این به معنای شکستن کلمات در وسط باشد:
این پاراگراف شامل یک کلمه بسیار بلند است: thisisaveryveryveryveryveryverylongword. کلمه بلند شکسته و به خط بعدی منتقل میشود.
کد CSS به شرح زیر است:
مثال
اجازه میدهد تا کلمات بلند شکسته و به خط بعدی منتقل شوند:
p { word-wrap: break-word; }
قوانین شکستن خط CSS
CSS word-break
ویژگی تعیین میکند که خطوط چگونه شکسته شوند.
این پاراگراف شامل چندین متن است. این خط در حروف جداگانه شکسته میشود:
این پاراگراف شامل چندین متن است. این خط در حروف جداگانه شکسته میشود:
این پاراگراف شامل چندین متن است. این خطها در هر کاراکتر شکسته میشوند:
این پاراگراف شامل چندین متن است. خطوط در هر کاراکتر شکسته میشوند.
کد CSS به شرح زیر است:
مثال
p.test1 { word-break: keep-all; } p.test2 { word-break: break-all; }
حالت نوشتاری CSS
CSS writing-mode
ویژگی تعیین میکند که خطوط نوشتار افقی یا عمودی قرار میگیرند.
متنهایی با استفاده از عنصر span با یک vertical-rl writing-mode.
در مثالهای زیر، برخی از حالتهای نوشتاری مختلف نمایش داده شده است:
مثال
p.test1 { writing-mode: horizontal-tb; } span.test2 { writing-mode: vertical-rl; } p.test2 { writing-mode: vertical-rl; }
ویژگیهای اثر نوشتاری CSS
در جدول زیر، ویژگیهای اثر نوشتاری CSS لیست شده است:
ویژگی | توضیح |
---|---|
text-align-last | تعیین میکند چگونه آخرین خط متن باید مرتب شود. |
text-justify | تعیین میکند چگونه متن باقیمانده باید مرتب و فاصله داده شود. |
text-overflow | تعیین میکند چگونه محتوای پر شده که نمیگنجد، نمایش داده شود. |
word-break | قوانین خطبری برای زبانهای غیر CJK مشخص میکند. |
word-wrap | اجازه میدهد کلمات بلند شکسته شده و به خط بعدی منتقل شوند. |
writing-mode | تعیین اینکه خط متن باید به صورت افقی یا عمودی قرار گیرد. |
- صفحه قبلی ت_SHADOW جعبه CSS
- صفحه بعدی فونتهای شبکهای CSS