ویژگی text-overflow در CSS

text-overflow Property

ویژگی text-overflow در CSS مشخص می کند که اگر محتوای متنی از محدوده تعیین شده سرریز شود، این مقدار چگونه حذف شده و مخاطب هم متوجه حذف آن شود. این حذف می تواند بصورت برش، استفاده از سه نقطه (...) و استفاده از کاراکتر دلخواه باشد.

نحوه نوشتار

text-overflow: clip;
text-overflow: ellipsis;

نکته: ویژگی text-overflow به تنهایی باعث نخواهد شد که حذف قسمت سرریز شده اتفاق بیفتد.
بدین منظور دو ویژگی دیگر یعنی overflow و white-space باید به عنصر مورد نظر اعمال شده و مقدار دهی شوند. برای مثال:

overflow: hidden;
white-space: nowrap;

مقادیر

clip​

متن برش داده شده و قابل روئیت نخواهد بود. این مقدار پیشفرض است.

ellipsis​

این مقدار از جایی که متن حذف می شود، سه نقطه (...) را نمایش خواهد داد.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<section>
    <p class="p1">
        این یک متن نمونه است.
    </p>
    <hr />
    <p class="p2">
        این یک متن نمونه است.
    </p>
    <hr />
    <p class="p3">
        این یک متن نمونه است.
    </p>
</section>

css

section {
    direction: rtl;
    font-family: "Segoe UI";
    max-width: 450px;
    margin: 20px auto;
    background-color: rgb(195, 255, 195);
    padding: 15px;
    border-radius: 7px;
}
p {
    width: 104px;
    white-space: nowrap;
    overflow: hidden;
    border: 2px solid #444444;
    padding: 3px;
    margin: 15px auto;
}
.p1 {
    overflow: visible; 
}
.p2 {
    text-overflow: ellipsis; 
}
.p3 {
    text-overflow: clip; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.