افکت های متن (Text Effects)
در این صفحه، با «افکت های متن CSS» آشنا می شویم. افکت متن یعنی روش های کنترل نمایش متن. مثلا «سرریز (Overflow)»، «شکستن کلمه (Word Break)» و «حالت نوشتار (Writing Mode)». با چند مثال ساده جلو می رویم و نتیجه را تست می کنیم.
افکت های متن CSS: text-overflow
ویژگی text-overflow می گوید متن اضافی چگونه دیده شود. «بی نشان (clip)» یا «سه نقطه (ellipsis)». برای کارکرد، باید white-space: nowrap و overflow: hidden فعال باشد.
p.test1 {\n width: 200px;\n border: 1px solid #000000;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: clip;\n}\n\np.test2 {\n width: 200px;\n border: 1px solid #000000;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\nنکته: برای دیدن کل متن روی عنصر هاور کن. با هاور می توانیم overflow را موقتا visible کنیم.
p:hover {\n overflow: visible;\n}\nword-wrap (شکستن اجباری کلمات)
word-wrap تعیین می کند کلمات بزرگ چگونه شکسته شوند. مقدار break-word حتی وسط کلمه هم می شکند تا صفحه نشکند.
p {\n word-wrap: break-word;\n}\nword-break (قواعد شکست خط)
word-break می گوید کجا خط بشکند. normal از قواعد زبان پیروی می کند. break-all در هر کاراکتر می شکند. keep-all از شکستن جلوگیری می کند.
p.normal {\n word-break: normal;\n}\n\np.breakall {\n word-break: break-all;\n}\nwriting-mode (جهت گیری نوشتار)
writing-mode جهت چینش خطوط را تعیین می کند. horizontal-tb افقی است. vertical-rl عمودی از راست به چپ است. vertical-lr عمودی از چپ به راست است.
p.hz {\n writing-mode: horizontal-tb;\n}\n\nspan.vrl {\n writing-mode: vertical-rl;\n}\n\np.vrl {\n writing-mode: vertical-rl;\n}\nمراحل سریع تنظیم افکت های متن
- عرض و overflow را مشخص کن.
- برای سه نقطه، nowrap را بگذار.
- اگر واژه ها بلندند، break-word را فعال کن.
- برای زبان های عمودی، writing-mode را تنظیم کن.
برای نکات واکنش گرا، صفحه طراحی واکنش گرا را ببین. همچنین برای رسانه ها، صفحه رسانه ها را چک کن. این دو، با افکت های متن CSS خوب ترکیب می شوند.
جمع بندی سریع
- text-overflow با nowrap و hidden کار می کند.
- break-word جلوی اسکرول افقی را می گیرد.
- break-all متن را ریز می شکند.
- writing-mode جهت متن را تغییر می دهد.
- همیشه نتیجه را در ادیتور تست کن.