در جلسه قبل از آموزش CSS با گرادینت در CSS3 آشنا شدید. در این بخش قصد داریم به ویژگی text-overflow در CSS3 یپردازیم.
ویژگی جدید text-overflow در CSS3 یا سرریزی متن به شما امکان کنترل بیشتری بر روی رندر متن را می دهد.
مدیریت سرزیری متن در CSS3
CSS3 چندین ویژگی جدید برای تغییر محتوای متن ارایه داده است که بیشتر آنها از خیلی وقت پیش ها وجود داشت.
این ويژگی ها کنترل دقیقی برای برای رندر متن در مرورگر وب به شما می دهند.
مخفی کردن متن overflow شده
زمانی که متن نشکند و به خط جدید نرود می تواند سرزیر شود, برای مثال, اگر ویژگی white-space مقدار nowrap را برای المان دربرگیرنده یا یک کلمه واحد که بسیار طولانی برای جاگیری در مثلا بخش ایمیل باشد.
در همچنین موقعیت هایی شما می توانید از ویژگی text-overflow در CSS3 برای مشخص کردن اینکه متن سرزیر شده به چه صورت نمایش داده شود, بهره ببرید.
شما می توانید آن را نمایش یا متن سرزیر شده را ببرید یا ببرید و نمایش بدید یا یک رشته سفارشی مثلا (…) به جای متن بریده شده قرار بدید تا کاربر بداند این متن یک ادامه ای دارد.
مقدایر قابل قبول برای text-overflow شامل clip, ellipsis و string است.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
p { width: 400px; overflow: hidden; white-space: nowrap; background: #cdcdcd; } p.clipped { text-overflow: clip; /* clipped the overflowed text */ } p.ellipses { text-overflow: ellipsis; /* display '…' to represent clipped text */ } |
توجه: مقدار string برای text-overflow در بیشتر مرورگرها پشتیبانی نمی شود, پس بهتر است از آن استفاده نکنید.
شکستن متن سرزیر شده
شما می توانید یک کلمه طولانی را بشکنید و آن را در خط جدید در محدوده همان المان نمایش بدید که اینکار با ویژگی word-wrap قابل انجام است.
مقدیر پذیرفته شده توسط word-wrap شامل normal و break-word است.
|
1 2 3 4 5 |
p { width: 200px; background: #ffc4ff; word-wrap: break-word; } |
مشخص کردن قوانین شکستن کلمه
شما می توانید این قوانین را با ویژگی word-break لحاظ کنید که مقادیر normal, break-all, keep-all را می پذیرد.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
p { width: 150px; padding: 10px; } p.break { background: #bedb8b; word-break: break-all; } p.keep { background: #f09bbb; word-break: keep-all; } |
امیدوارم در این بخش آموزش CSS, از ویژگی text-overflow در CSS3 نهایت استفاده را برده باشید.
در بخش بعدی با ویژگی shadow در css آشنا می شویم
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
