در ادامه سلسله مقالات آموزش CSS در این مقاله در مورد خصوصیت text-overflow خصوصیت text-overflow در سی اس اس صحبت خواهیم کرد.
با استفاده از ویژگی text-overflow می توانیم زمانی که طول متن از عنصر والدش بیشتر می شود،کاربر را از این موضوع با خبر کنیم به عبارت دیگر تعیین می کنیم در نقطه ای که سرریز اتفاق می افتد چه چیزی نمایش داده شود.
اما در حالت عادی زمانی که طول متن از والدش بیشتر شود متن شکسته شده و به خط بعد منتقل می شود بنابراین ابتدا باید بررسی کنیم یک متن چه زمانی از والدش سرریز می شود؟
سرریز یک متن از والدش زمانی اتفاق می افتد که اولا عنصر نگهدارنده از نوع بلاک باشد و دوما متن یک کلمه بلند باشد که بین حروفش فاصله ای وجود نداشته باشد و یا اینکه برای عنصر ویژگی white-space با مقدار nowrap تعیین شده باشد.
در تصویر زیر نمونه هایی از سرریز شدن متن از والد خود را مشاهده می کنید:
در حالت عادی ویژگی text-overflow هیچ تاثیری بر روی عنصر نخواهد گذاشت. برای اینکه این ویژگی بر روی عناصر تاثیر بگذارد نیاز است تا مقدار ویژگی overflow عنصر را برابر با hidden قرار دهیم.
نکته : در تصویر اول ویژگی text-overflow عنصر hidden نشده است و به همین دلیل مشاهده می کنید که متن سرریز شده در از والد خود بیرون زده است.
مقادیر text-overflow
این ویژگی سه مقدار زیر را می تواند بپذیرد که در ادامه هر کدام از این مقادیر را بررسی خواهیم کرد.
text-overflow: clip | ellipsis | inherit
مقدار clip
این مقدار،مقدار اولیه و پیش فرض ویژگی text-overflow می باشد و عملکرد آن نیز به این صورت است که جایی که متن سرریز می شود،ادامه متن را برش می دهد. یعنی همان نتیجه ای که در مثال دوم تصویر بالا مشاهده می شود.
در واقع به منظور اینکه خروجی مشابه مثال دوم داشته باشیم باید از دستورات زیر برای عنصر استفاده کنیم:
white-space: nowrap;
overflow: hidden;
text-overflow: clip; /* initial */
مقدار ellipsis
زمانی که از این مقدار استفاده می کنیم،جایی که متن سرریز می شود علامت ... قرار داده می شود تا به کاربر اعلام شود که این متن ادامه دار می باشد.نحوه استفاده از این مقدار نیز به صورت زیر می باشد که استفاده از این دستورات سبب می شود تا خروجی مشابه مثال سوم داشته باشیم.
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
مقدار inherit
با استفاده از این مقدار می توان مقدار پدر عنصر را برای خود عنصر نیز تعیین کرد.
در دموی زیر نحوه استفاده از ویژگی text-overflow را می توانید بررسی کنید:
پشتیبانی مروگرها
امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه آموزش های CSS با ما همراه باشید.
کامنت جدید ...