ویژگی word-spacing در CSS

word-spacing Property

ویژگی word-spacing در CSS میزان فاصله بین کلمات را مشخص می کند.

نحوه نوشتار

word-spacing: normal;
word-spacing: 4px;
word-spacing: 0.3rem;

مقادیر

normal​

این مقدار پیشفرض است. مقدار پیشفرض را بنا بر نوع فونت و مرورگر اعمال می کند.

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

فاصله ای بیشتر از مقدار پیشفرض با استفاده از واحدهای اندازه در CSS  مانند ( px, rem ,em ) بین کلمات اضافه می شود. مقادیر منفی نیز فاصله بین کلمات را کمتر خواهند کرد.

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

html

<section>
    <div class="w-s1">
        <h3>word-spacing: normal</h3>
        لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
        بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
    </div>
    <hr />
    <div class="w-s2">
        <h3>word-spacing: 10px</h3>
        لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
        بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
    </div>
    <hr />
    <div class="w-s3">
        <h3>word-spacing: 1em</h3>
        لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
        بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
    </div>
</section>

css

section {
    direction: rtl;
    font: bold 16px calibri;
    background-color: rgb(215, 241, 250);
    padding: 15px;
}
h3 {
    color: red;
    margin: 0 0 7px;
    text-align: center;
}
.w-s1 {
    word-spacing: normal; 
}
.w-s2 {
    word-spacing: 10px; 
}
.w-s3 {
    word-spacing: 1em; 
}

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

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