این آموزش در تاریخ ۱۴۰۲/۰۶/۲۸ آپدیت شده است.
کار با جلوه های متن یا Text Effects در CSS3
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با جلوه های متن یا Text Effects در CSS3 با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
جلوه های متن یا Text Effects در CSS3
یسری ویژگی در زبان CSS وجود دارند که به عنوان جلوه های متن یا Text Effects مورد استفاده قرار میگیرند که با استفاده از اونها میشه روی متن ها کار کرد.
مثلا میتونیم مشخص کنیم که یک محتوای سرریز شده یا به اصطلاح OverFlow شده را چگونه به نمایش درآوریم، و یا مثلا مشخص کنیم که کلمات موجود در یک متن شکسته شوند یا خیر و..
- Text-Overflow : متن سرریز شده یا از باکس زده بیرون
- Word-Wrap : نحوه شکسته شدن کلمات طولانی
- Word-Break : تکه تکه کردن کلمات یک متن
- Writing-Mode : نمایش یک متن بصورت عمودی
Free-Learn
کار با ویژگی Text-Overflow در CSS3
با استفاده از این ویژگی میتوان نحوه سَرریز شدن متن / محتوا را مشخص کرد، یعنی مثلا اگه یه متن از یه محدوده زد بیرون ، چجوری میتونیم
- clip : گزینه پیش فرض
- ellipsis : یه سه نقطه مثه این … برای ادامه متن میزاره
- string : میشه یه متن دلخواه گذاشت
- مقدار String فعلا و درحال حاضر فقط بروی مرورگر موزیلا فایرفاکس کار میکنه
- برای اینکه ویژگی Text-Overflow کار کنه باید از ویژگی های زیر هم استفاده کنیم
- white-space: nowrap;
- overflow: hidden;
مثال شماره ۱ : استفاده از ۳ مقدار این ویژگی ( مقدار string فقط بروی مرورگر فایرفاکس عمل میکنه )
|
1 2 3 4 5 6 7 8 9 10 11 |
.t1{ text-overflow:clip; } .t2{ text-overflow:ellipsis; } .t3{ text-overflow:" »"; } |
Free-Learn
کار با ویژگی Word-Wrap در CSS3
با استفاده از این ویژگی در CSS میتوان کلماتی که طولانی و بهم چسبیده هستن رو شکست و در سطرهای بعدی نمایش داد.
- normal : گزینه پیش فرض
- break-word : شکست کلمات طولانی
مثال شماره ۱ : استفاده از ۲ مقدار بالا
|
1 2 3 |
.t2{ word-wrap:break-word; } |
Free-Learn
کار با ویژگی Word-Break در CSS3
با استفاده از این ویژگی نیز میتوان نحوه شکسته شدن کلمات یک متن را مشخص کرد، که تقریبا میشه گفت شبیه به ویژگی Word-Wrap که در مثال قبلی باهاش آشنا شدید.
- break-all : تحت هر شرایطی کلمات رو میشکنه
- keep-all : کلمات را نگه میدارد و نمیشکنه
مثال
|
1 2 3 4 5 6 7 |
.t1{ word-break:keep-all; } .t2{ word-break:break-all; } |
Free-Learn
کار با ویژگی Writing-Mode در CSS3
با استفاده از ویژگی Writing-Mode نیز میتوان حالت نوشتن یک متن را مشخص کرد، مثلا یک متن بصورت افقی نمایش داده شود یا بصورت عمودی.
مثال شماره ۱ : نمایش یک متن بصورت عمودی
|
1 2 3 4 5 6 7 |
<style> .t1{ writing-mode:vertical-rl; } </style> |
