صفت text-overflow در css

صفت text-overflow در css آگاهی سرریز متن از تگ کانتینر

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد خاصیت text-overflow در زبان css توضیحاتی را ارائه نماییم.

ویژگی کاربردی text-overflow در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.

معرفی و کاربرد ویژگی text-overflow در زبان طراحی سی اس اس

به کمک خاصیت text-overflow می توانیم تا زمانی که متن از عنصر html نگهدارنده اش سرریز می شود، کاربر را با خبر کنیم.

در حقیقت توسط این صفت می توانیم نحوه نمایش را در نقطه ای که سرریز یا بیرون زدگی متن رخ داده مشخص نماییم.

در چه حالت هایی متن از تگ نگهدارنده اش ممکن است سرریز شود:

1. تگ html نگهدارنده متن حتما باید از نوع بلاک لول ( block-level ) باشد.
2. کاراکترهای یک کلمه در متن بدون space و فاصله بین آنها بلند باشد.
3. برای تگ نگهدارنده متن html ، خصوصیت white-space همراه با مقدار nowrap تعریف شده باشد.

مقادیر صفت کاربردی text-overflow در زبان طراحی css

صفت text-overflow که در زبان طراحی CSS3 معرفی شده است، 5 مقدار می پذیرد که عبارتند از:

1. مقدار clip
2. مقدار ellipsis
3. مقدار string
4. مقدار initial
5. مقدار inherit

مقدار clip درون خاصیت text-overflow در زبان سی اس اس

اگر خاصیت text-overflow را برای یک عنصر html برابر با مقدار clip قرار دهیم، در حقیقت می خواهیم متن موجود در تگ html نگهدارنده از ناحیه سرریز شدن برش بخورد.

مقدار clip به عنوان مقدار پیش فرض خصوصیت text-overflow محسوب می شود.

[html] div{ text-overflow: clip; }[/html]

مقدار ellipsis درون خاصیت text-overflow در زبان css

اگر خاصیت text-overflow را برای یک عنصر html برابر با مقدار ellipsis قرار دهیم، در حقیقت می خواهیم متن موجود در تگ html نگهدارنده از ناحیه سرریز شدن به جای برش خوردن ، در همان ناحیه کاراکتر سه نقطه (…) قرار بگیرد.

در این حالت کاربر متوجه می شود که متن در ناحیه سه نقطه ادامه داشته و جهت جلوگیری از بیرون زدگی سه نقطه قرار گرفته است.

[html] div{ text-overflow: ellipsis; }[/html]

مقدار string درون خاصیت text-overflow در زبان سی اس اس

اگر خاصیت text-overflow را برای یک عنصر html برابر با مقدار string قرار دهیم، در حقیقت می خواهیم متن موجود در تگ html نگهدارنده در ناحیه سرریز ، توسط یک رشته متنی یا string که توسط این مقدار تعریف می کنیم، برش داده شود.

[html] div{ text-overflow: “…این بخش از متن در ناحیه سه نقطه بیرون زدگی دارد”; }[/html]

مقدار initial درون خاصیت text-overflow در زبان css

اگر خاصیت text-overflow را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت text-overflow در زبان سی اس اس

اگر خاصیت text-overflow را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.

صفت text-overflow در css آگاهی سرریز متن از تگ کانتینر

بررسی خاصیت text-overflow از نظر نسخه زبان طراحی css

ویژگی کاربردی text-overflow در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.

بررسی ساختاری خصوصیت text-overflow در زبان طراحی سی اس اس

عناوین ساختاری خاصیت text-overflow	وضعیت ساختاری خاصیت text-overflow
مقدار پیش فرض	clip
قابلیت توارث	ندارد
قابلیت تحرک	ندارد
ورژن css صفت	CSS3
سینتکس صفت در جاوا اسکریپت	"object.style.textOverflow="ellipsis

پشتیبانی مرورگرهای اینترنتی از خاصیت text-overflow در زبان طراحی css

خاصیت css
text-overflow	4.0	6.0	7.0	3.1	11.0 و 9.0 با -o-