خب، احتمالاً شما تا حالا در طراحی وب به این مشکل برخورد کرده‌اید که متنی درون یک <div> یا هر عنصر دیگری به خاطر فضای کم، شکسته می‌شود و به خط بعدی می‌رود. این موضوع می‌تواند از لحاظ ظاهری صفحه وب شما را کمی ناهنجار کند و یا حتی خوانایی متن شما را کاهش دهد. برای جلوگیری از این اتفاق، این جا شما را با یک خاصیت CSS بسیار کاربردی به نام white-space آشنا می‌کنیم.
خاصیت white-space به ما اجازه می‌دهد کنترل بیشتری داشته باشیم روی چگونگی رفتار فضاهای خالی و شکستن خطوط در صفحه. یکی از محبوب‌ترین مقادیر این خاصیت برای حل مشکلات شما nowrap است، که همان‌طور که از نام آن مشخص است، مانع پیچیدن سریع متن یا کلمات به خط بعدی می‌شود.
توجه داشته باشید که زمانی که از nowrap استفاده می‌کنید، ممکن است با مشکل دیگری مرسوم به overflow برخورد کنید که نیاز به اسکرول افقی ایجاد کند. بنابراین، ممکن است نیاز باشد از استایل‌های اضافی مانند overflow-x: auto; استفاده کنید تا به بهترین نحو به موضوع برخورد کنید.
حالا یک نمونه ساده از استفاده white-space: nowrap; در CSS:
<style>
.nowrap {
white-space: nowrap;
width: 200px;
border: 1px solid #ccc;
overflow-x: auto;
}
</style>
<div class="nowrap">
این یک متن خیلی طولانی است که نباید به خط بعدی برود چون که ما نمی‌خواهیم.
</div>
توضیحات کد:
<style>: این تگ CSS است که ما درون آن استایل‌های خود را می‌نویسیم.
.nowrap: این کلاس را به <div> خود داده‌ایم تا بتوانیم استایل white-space را اعمال کنیم.
white-space: nowrap;: این دستور مانع از شکستن سریع کلمات به خطوط بعدی می‌شود.
width: 200px;: عرض <div> را به ۲۰۰ پیکسل محدود کرده‌ایم تا مثال بیشتری واقعی باشد.
border: 1px solid #ccc;: یک حاشیه برای نمایش بهتر <div> افزوده‌ایم.
overflow-x: auto;: برای جلوگیری از نمایش محتوای بیش از اندازه از محدودیت‌های تعیین شده، اسکرول افقی به <div> اضافه کرده‌ایم.