ویژگی text-indent در CSS

text-indent Property

ویژگی text-indent در CSS میزان تو رفتگی اولین سطر از پاراگراف متن را مشخص می کند.

نحوه نوشتار

text-indent: 3mm;
text-indent: 40px;
text-indent: 15%;

مقادیر

واحد اندازه (طول)

​مقدار ثابت با استفاده از واحد های اندازه CSS مشخص می شود. مانند: px , em , rem.

درصد​

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

نکته: مقادیر منفی نیز میتوان بکار برد که در اینصورت به عوض تو رفتگی از جایگاه پیشفرض به عقب کشیده خواهد شد.

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

html

<div class="wrapper">
    <p class="p1">
        لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
        بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
    </p>
    <hr />
    <p class="p2">
        لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
        بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
    </p>
    <hr />
    <p class="p3">
        لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
        بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
    </p>
</div>

css

.wrapper {
    direction: rtl;
    font-family: "Segoe UI";
    max-width: 450px;
    padding: 15px;
    margin: 0 auto;
    background-color: rgb(182, 245, 182);
}
.p1 {
    text-indent: 50px; 
}
.p2 {
    text-indent: -50px; 
}
.p3 {
    text-indent: 50%; 
}

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

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