ویژگی white-space در CSS

white-space Property

ویژگی white-space در CSS مشخص می کند که فضای خالی در عنصر چگونه نشان داده شود.

نحوه نوشتار

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

مقادیر

normal​

توالی پشت سرهم فاصله ها تبدیل به یک فاصله می شوند. متن در صورت نیاز شکسته و به سطر بعدی می رود.

nowrap​

توالی پشت سرهم فاصله ها تبدیل به یک فاصله می شوند. متن هیچگاه شکسته و به سطر بعدی نمیرود مگر با استفاده از تگ <br> شود.

pre​

توالی پشت سر هم فاصله ها حفظ می شوند. متن هیچگاه شکسته و به سطر بعدی نمیرود مگر با استفاده از تگ <br> شود.

pre-wrap​

توالی پشت سر هم فاصله ها حفظ می شوند. متن در صورت نیاز شکسته و به سطر بعدی می رود.

pre-line​

توالی پشت سرهم فاصله ها تبدیل به یک فاصله می شوند. متن در صورت نیاز شکسته و به سطر بعدی می رود.

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

html

 <section>
      <div class="wrapper">
        <div class="normal">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum est
          animi quaerat aliquam nemo itaque in a mollitia, quisquam fugiat
          inventore voluptatibus! Optio sint facere consectetur fugit quod
          repellendus neque?.
        </div>
        <div class="nowrap">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum est
          animi quaerat aliquam nemo itaque in a mollitia, quisquam fugiat
          inventore voluptatibus! Optio sint facere consectetur fugit quod
          repellendus neque?.
        </div>
        <div class="pre">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum est
          animi quaerat aliquam nemo itaque in a mollitia, quisquam fugiat
          inventore voluptatibus! Optio sint facere consectetur fugit quod
          repellendus neque?.
        </div>
      </div>
      <div class="wrapper">
        <div class="pre-wrap">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum est
          animi quaerat aliquam nemo itaque in a mollitia, quisquam fugiat
          inventore voluptatibus! Optio sint facere consectetur fugit quod
          repellendus neque?.
        </div>
        <div class="pre-line">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum est
          animi quaerat aliquam nemo itaque in a mollitia, quisquam fugiat
          inventore voluptatibus! Optio sint facere consectetur fugit quod
          repellendus neque?.
        </div>
      </div>
</section>

css

.wrapper { display: flex; }
.wrapper div {
    background-color: #d7d7d7;
    margin: 2% 2% 0 0;
    width: 230px;
}
.wrapper div:last-child { margin-right: 0; }
h3 {
    color: blue;
    font: normal 15px consolas;
    text-align: center;
    margin: 0;
}
.normal {
    white-space: normal; 
}
.nowrap {
    white-space: nowrap;
    color: green;
}
.pre {
    white-space: pre;
    color: blue;
 }
.pre-wrap {
    white-space: pre-wrap; 
}
.pre-line {
    white-space: pre-line; 
}

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

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