نحوه جلوگیری از شکستن خط (Line Break) با CSS

کیانا4 روز پیش

0 12 خواندن این مطلب 14 دقیقه زمان میبرد

مقدمه

مرورگرها به‌طور پیش‌فرض متن را wrap می‌کنند تا محتوا داخل کانتینر بماند. اما مواردی هست که می‌خواهید رشته‌ای از متن یا ردیفی از عناصر inline روی یک خط بمانند: لینک‌های ناوبری، برچسب دکمه‌ها، شناسه‌های کد، سلول‌های جدول یا پیش‌نمایش‌های تک‌خطی با برش (Truncation). CSS چندین پراپرتی برای این کار به شما می‌دهد؛ شامل white-space، overflow-wrap، word-break، hyphens، flex-wrap و text-overflow.

در این آموزش، هر پراپرتی را با مثال‌های قابل اجرا مرور می‌کنید؛ آن‌ها را برای برش تک‌خطی با سه‌نقطه (Ellipsis) ترکیب می‌کنید و پراپرتی‌های متنیِ اعلانی را با رویکردهای سطح-چیدمانی که از flexbox و CSS Grid استفاده می‌کنند مقایسه می‌نمایید. در پایان می‌دانید در هر سناریو سراغ کدام پراپرتی بروید؛ شامل متن داخل <span>، آیتم‌های لیست در نوار ناوبری، رشته‌های طولانی نشکستنی مثل URLها و فرزندان flex که هرگز نباید wrap شوند.

نکات کلیدی

اول سراغ white-space: nowrap بروید وقتی عنصری نباید هرگز wrap شود؛ اما هر وقت محتوا ممکن است از کانتینر طولانی‌تر باشد، آن را با overflow: hidden یا overflow: auto جفت کنید؛ وگرنه خود صفحه به‌صورت افقی اسکرول می‌شود.
برای URLهای طولانی، hashها و tokenها داخل کارت‌ها یا سلول‌های جدول از overflow-wrap: break-word استفاده کنید. وقتی همان عنصر فرزندِ flex یا grid است به‌جایش overflow-wrap: anywhere را انتخاب کنید؛ چون anywhere اندازه min-content آیتم را کاهش می‌دهد و جلوی کشیده شدن والد را می‌گیرد.
برش تک‌خطی هر سه مورد white-space: nowrap، overflow: hidden و text-overflow: ellipsis را لازم دارد. هر کدام را حذف کنید، سه‌نقطه ظاهر نمی‌شود.
برای برش چندخطی (دو، سه یا N خط با سه‌نقطه) از display: -webkit-box، -webkit-box-orient: vertical، -webkit-line-clamp: N و overflow: hidden استفاده کنید. شکل خلاصه‌شده مدرنِ line-clamp در حال عرضه شدن است؛ اما فرم پیشونددار هنوز عریض‌ترین پشتیبانی را دارد.
flex-wrap: nowrap پیش‌فرض flexbox است؛ اما به‌تنهایی جلوی overflow را نمی‌گیرد. روی فرزندان flexی که متن طولانی دارند min-width: 0 تنظیم کنید؛ وگرنه فرزندان از اندازه محتوایشان کوچک‌تر نمی‌شوند و از کانتینر بیرون می‌زنند.
hyphens: auto بدون ویژگی lang روی عنصر یا ریشه <html> هیچ کاری نمی‌کند و پیشوند -webkit-hyphens سافاری را هم لازم دارد. hyphens: manual فقط در نقاط نیم‌فاصله نرمِ () که در markup گذاشته‌اید فعال می‌شود.
پراپرتی را با محدوده‌ای که کنترل می‌کنید تطبیق دهید: white-space، overflow-wrap، word-break و hyphens پراپرتی‌های سطح-متنی‌اند که روی محتوای یک عنصر اثر می‌گذارند. flex-wrap و اندازه‌گذاری ترک‌های grid پراپرتی‌های سطح-چیدمانی‌اند که روی رابطه بین خواهر-برادرها اثر می‌گذارند.

پیش‌نیازها

برای تکمیل این آموزش به این موارد نیاز دارید:

ویرایشگر کد به انتخاب خودتان؛ مثل nano یا Visual Studio Code
یک مرورگر وب
راحتی با مبانی HTML. برای آشنایی، سری آموزشی «نحوه ساخت وب‌سایت با HTML» در پارمین کلود را ببینید.

چه چیزی باعث شکستن خط ناخواسته در CSS می‌شود

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

۱. شکستن متن درون یک عنصر منفرد. عنصر از محتوایش باریک‌تر است و مرورگر در نزدیک‌ترین فاصله می‌شکند. روی خود عنصر با white-space: nowrap رفع کنید؛ که به‌صورت اختیاری برای برش با overflow و text-overflow ترکیب می‌شود.

۲. سرریز رشته طولانیِ نشکستنی. URL، hash یا tokenای فرصت شکست نرم ندارد؛ پس مرورگر اصلاً نمی‌تواند بشکندش و محتوا از کانتینر عبور می‌کند. با overflow-wrap: break-word یا overflow-wrap: anywhere روی عنصرِ نگه‌دارنده رشته رفع کنید.

۳. خواهر-برادرهای inline جدا شده روی خطوط مختلف. دو یا چند فرزند inline یا flex روی همان ردیف می‌نشینند و مرورگر وقتی فضا تمام می‌شود آن‌ها را روی خطوط مختلف می‌گذارد. روی والد با white-space: nowrap (برای محتوای inline در والد بلوکی) یا flex-wrap: nowrap به‌علاوه min-width: 0 روی فرزندان (برای چیدمان‌های flex) رفع کنید.

بقیه این مقاله رفعِ سطح-پراپرتی‌ای هر مورد و هم‌چنین جایگزین‌های سطح-چیدمانی را وقتی پراپرتی‌های متنی کافی نیستند، مرور می‌کند.

استفاده از white-space: nowrap برای جلوگیری از شکستن خط

white-space: nowrap جلوی wrap شدن متن درون عنصر به خط جدید را می‌گیرد؛ فارغ از عرض کانتینر. وقتی استفاده کنید که کل گره متنی باید روی یک خط بماند.

سینتکس و استفاده پایه

white-space شش کلیدواژه می‌پذیرد که هر کدام ترکیب متفاوتی از فرو دادن توالی‌ها، حفظ کاراکترها و اجازه دادن wrap را تعریف می‌کند. این پراپرتی کنترل می‌کند فضای سفید و شکست خطوط در سورس چگونه مدیریت شوند:

white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces

هر کلیدواژه این کارها را می‌کند:

normal: توالی‌های فضای سفید را فرو می‌دهد و در صورت نیاز wrap می‌کند.
nowrap: فضای سفید را فرو می‌دهد؛ اما wrap خط درون عنصر را سرکوب می‌کند.
pre: فضای سفید و شکست خطوط سورس را حفظ می‌کند؛ بدون wrap به‌جز در کاراکترهای Newline.
pre-wrap: فضای سفید و شکست خطوط را حفظ و برای اجتناب از overflow در صورت نیاز wrap می‌کند.
pre-line: فضای سفید را فرو می‌دهد، Newlineهای سورس را حفظ و در صورت نیاز wrap می‌کند.
break-spaces: مثل pre-wrap؛ اما هر فضای سفیدی در انتهای خط می‌تواند فرصت شکست ایجاد کند.

جلوگیری از شکستن خط در عنصر span

white-space: nowrap را روی spanای اعمال کنید که باید روی یک خط بماند. شماره تلفن، کد محصول یا token دیگری را در span بپیچید؛ سپس wrap شدن را روی همان span فریز کنید:

<p>Call us at <span class="no-break">(555) 123-4567</span> today.</p>

.no-break {
  white-space: nowrap;
}

جلوگیری از شکستن خط در آیتم‌های لیست ناوبری

white-space: nowrap را روی هر li یا a تنظیم کنید تا برچسب‌های منو داخل آیتم wrap نشوند. هر برچسب را روی ویوپورت‌های باریک سالم نگه دارید با هدف‌گیری آیتم لیست یا لینک:

<ul class="site-nav">
  <li><a href="/docs">Documentation</a></li>
  <li><a href="/pricing">Pricing</a></li>
  <li><a href="/contact">Contact sales</a></li>
</ul>

.site-nav li,
.site-nav a {
  white-space: nowrap;
}

جلوگیری از شکستن بین تصویر inline و برچسبش

آیکن و برچسبش را در عنصر inline منفردی بپیچید و white-space: nowrap را روی همان wrapper اعمال کنید تا جفت هرگز بین خطوط جدا نشوند:

<p>Status: <span class="status"><img src="/img/check.svg" alt="" width="16" height="16"> Verified</span></p>

.status {
  white-space: nowrap;
}

تصویر inline و کلمه «Verified» حتی وقتی پاراگراف اطرافشان wrap می‌شود، روی همان خط با هم می‌مانند.

وقتی white-space: nowrap انتخاب درستی است

وقتی سراغ nowrap بروید که رشته کوتاه، کاربر-ساخته یا شناسه‌ای است که باید به‌عنوان یک واحد خوانده شود. برای سلول‌های جدولی که نباید جدا شوند، badgeها و هر عنصری که overflow افقی را می‌پذیرید یا با برش جفتش می‌کنید مناسب است. برای نثر طولانی مناسب‌تر نیست؛ چون اجبار یک خطی خوانایی را آسیب می‌زند؛ مگر اینکه هم‌زمان برش یا اسکرول بدهید.

استفاده از overflow-wrap برای کنترل شکست در سطح کلمه

overflow-wrap کنترل می‌کند آیا مرورگر مجاز است داخل رشته‌ای که در غیر این صورت نشکستنی است بشکند تا از overflow جلوگیری کند. فاصله‌ها را به‌عنوان نقاط wrap حذف نمی‌کند؛ بلکه در صورت نیاز فرصت‌های شکست اضافه می‌دهد.

overflow-wrap: normal در مقابل break-word در مقابل anywhere

normal شکست‌ها را فقط در فرصت‌های wrap استاندارد نگه می‌دارد؛ break-word اجازه جدا کردن tokenهای طولانی برای اجتناب از overflow را اضافه می‌کند؛ و anywhere همان کار را از نظر بصری انجام می‌دهد اما به مرورگر اجازه می‌دهد آن نقاط شکست را هنگام اندازه‌گذاری والد هم حساب کند.

مقدار anywhere در چیدمان‌های flex و grid مهم است. مرورگر برای تصمیم‌گیری درباره اینکه هر آیتم چقدر می‌تواند کوچک شود، اندازه min-content را محاسبه می‌کند. با break-word، آن محاسبه فرصت‌های شکست جدید را نادیده می‌گیرد؛ پس آیتم flex حاوی URL طولانی همچنان min-content عریضی گزارش می‌کند و از کوچک شدن امتناع می‌کند. با anywhere، محاسبه فرصت‌های شکست را شامل می‌شود؛ پس آیتم برای جا شدن کوچک می‌شود. از break-word برای متن ساده در کانتینرهای ایستا و از anywhere برای متن داخل آیتم‌های flex یا grid که نباید والدشان را منفجر کنند استفاده کنید.

مثال عملی با رشته‌های طولانی نشکستنی

دو باکس زیر همان URL طولانی را رندر می‌کنند. اولی از overflow-wrap: normal استفاده می‌کند و سرریز می‌کند؛ دومی از overflow-wrap: break-word استفاده می‌کند و داخل کانتینر می‌ماند:

<p class="wrap-normal">https://www.example.com/path/very-long-segment-without-spaces-that-would-overflow</p>
<p class="wrap-break">https://www.example.com/path/very-long-segment-without-spaces-that-would-overflow</p>

.wrap-normal {
  overflow-wrap: normal;
  max-width: 220px;
  border: 1px solid #ccc;
}

.wrap-break {
  overflow-wrap: break-word;
  max-width: 220px;
  border: 1px solid #ccc;
}

نکته: overflow-wrap قبلاً word-wrap نام داشت. مرورگرها هنوز word-wrap را به‌عنوان نام مستعار می‌پذیرند؛ اما در استایل‌شیت‌های جدید overflow-wrap را ترجیح دهید.

استفاده از word-break برای جلوگیری از شکست‌های خط تیره و سطح کاراکتر

word-break نحوه وقوع شکست درون کلمات—including در محتوای CJK—را کنترل می‌کند؛ در حالی که پراپرتی hyphens شکست‌های خط‌تیره‌گذاری خودکار را کنترل می‌کند. این دو با هم رفتار را وقتی فاصله‌های استاندارد کافی نیستند دقیق تنظیم می‌کنند.

word-break: keep-all و چه زمانی از آن استفاده کنیم

word-break: keep-all جلوی شکستن مرورگر درون کلمات برای متن CJK را می‌گیرد؛ و word-break: break-all به آن اجازه می‌دهد بین هر دو کاراکتر در هر خط نوشتاری بشکند. از keep-all برای محتوای چینی، ژاپنی یا کره‌ای استفاده کنید؛ جایی که شکست‌های میانه-کلمه مثل خطا خوانده می‌شوند. از break-all برای tokenهای متراکم خط-لاتین مثل hashهای کامیت، رشته‌های base64 یا شناسه‌های تولیدشده در سلول‌های جدول باریک استفاده کنید؛ جایی که wrap اجباری به overflow ترجیح دارد:

<p class="hash">a3f5b8e2c9d7f4a1b6e8d2c5f9a3b7e1d4c8f2a5b9e3c7d1f4a8b2e5c9d3f6a0</p>

.hash {
  word-break: break-all;
  max-width: 240px;
  font-family: monospace;
  border: 1px solid #ddd;
  padding: 0.5rem;
}

hash حالا در موقعیت‌های کاراکتری دلخواه wrap می‌شود و داخل کانتینر می‌ماند. بدون word-break: break-all، همان رشته از لبه راست عبور می‌کرد.

جلوگیری از شکست خط تیره با پراپرتی hyphens

hyphens خط‌تیره‌گذاری خودکار را در سه حالت کنترل می‌کند: none آن را سرکوب می‌کند؛ manual آن را فقط در نیم‌خط‌تیره‌های نرمی که در markup گذاشته‌اید فعال می‌کند؛ و auto به مرورگر اجازه می‌دهد طبق قوانین زبان خط‌تیره‌گذاری کند.

برای خاموش کردن کامل خط‌تیره‌گذاری، هم پراپرتی پیشونددار و هم بدون پیشوند را تنظیم کنید:

.no-hyphenation {
  -webkit-hyphens: none;
  hyphens: none;
}

برای خط‌تیره‌گذاری فقط در موقعیت‌هایی که انتخاب می‌کنید، نیم‌خط‌تیره‌های نرم () را در markup درج و از hyphens: manual استفاده کنید:

<p class="manual-hyphens">extraordinary documentation</p>

.manual-hyphens {
  -webkit-hyphens: manual;
  hyphens: manual;
}

مرورگر فقط وقتی خط از عرض بیرون می‌زند در موقعیت‌های نیم‌خط‌تیره می‌شکند؛ و نیم‌خط‌تیره‌ها در غیر این صورت نامرئی‌اند.

برای فعال کردن خط‌تیره‌گذاریِ مرورگر-محور، زبانی اعلان و hyphens: auto را تنظیم کنید:

<article lang="en">
  <p class="auto-hyphens">Antidisestablishmentarianism is a notably long English word.</p>
</article>

.auto-hyphens {
  -webkit-hyphens: auto;
  hyphens: auto;
}

نکته: hyphens: auto بدون ویژگی lang روی عنصر یا جدش (ریشه <html> جای متعارف است) هیچ کاری نمی‌کند. مرورگر از زبان اعلان‌شده برای بارگذاری دیکشنری خط‌تیره‌گذاری‌اش استفاده می‌کند؛ بدون زبان، قاعده‌ای برای اعمال ندارد. پوشش هم وابسته به زبان است: انگلیسی، آلمانی، فرانسوی و اسپانیایی به‌طور گسترده پشتیبانی می‌شوند؛ در حالی که زبان‌های کوچک‌تر ممکن نشوند.

استفاده از Flexbox برای جلوگیری از شکستن خط بین عناصر

flex-wrap: nowrap روی کانتینر flex همه فرزندان flex را روی خط منفردی مجبور می‌کند. این کنترل درستی است وقتی چند آیتم یک ردیف را شریک می‌کنند و نباید به خط بعدی بیفتند.

flex-wrap: nowrap برای گروه‌های عناصر inline

nowrap مقدار اولیه flex-wrap است؛ پس کانتینر flex به‌طور پیش‌فرض فرزندانش را روی یک خط نگه می‌دارد. وقتی آیتم‌ها دیگر جا نمی‌شوند؛ بسته به flex-shrink، min-width و overflow والد، کوچک می‌شوند، سرریز می‌کنند یا اسکرول می‌خورند.

نکته مهم: رایج‌ترین باگ سرریز flex اصلاً به flex-wrap مربوط نیست. آیتم‌های flex پیش‌فرض min-width: auto دارند که جلوی کوچک‌تر شدن از اندازه ذاتی محتوایشان را می‌گیرد. وقتی فرزند flex حاوی کلمه یا URL طولانی است، فرزند از کوچک شدن امتناع و والد را از ویوپورت عریض‌تر می‌کند. روی فرزند flex مقدار min-width: 0 (و اغلب overflow: hidden) تنظیم کنید تا بتواند کوچک شود. این رفعِ «چیدمان flexbox من روی موبایل سرریز می‌کند» در حدود نه مورد از ده مورد است.

.flex-child-shrinks {
  min-width: 0;
  overflow: hidden;
}

مثال عملی نوار ناوبری با Flexbox

ul افقی با display: flex، flex-wrap: nowrap و gap، هر لینک را روی یک ردیف نگه می‌دارد و هم‌زمان آیتم‌ها را با فاصله مساوی می‌چیند:

<nav aria-label="Primary">
  <ul class="nav-row">
    <li><a href="/">Home</a></li>
    <li><a href="/product">Product</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/support">Support</a></li>
  </ul>
</nav>

.nav-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

استفاده از CSS Grid برای نگه داشتن عناصر روی یک خط

چیدمان تک‌ردیفی CSS Grid با تعریف یک ترک ردیف و به همان اندازه آیتم، ترک ستون، آیتم‌های grid را روی یک خط نگه می‌دارد. وقتی استفاده کنید که هم‌ترازی ستونی بدون قوانین کوچک‌شدن محور اصلی flex می‌خواهید.

چیدمان Grid تک‌ردیفی برای جلوگیری از wrap شدن

grid-auto-flow: column همراه grid-auto-columns: max-content ردیف منفردی از همان تعداد ستونِ آیتم‌ها می‌سازد. وقتی سراغ grid بروید که می‌خواهید هر آیتم به محتوای خودش اندازه شود؛ بدون قوانین کوچک‌شدن محور اصلیِ flexbox.

ردیف breadcrumb موارد استفاده معمولی است. هر crumb ستون خودش است و ردیف حتی روی ویوپورت‌های باریک هرگز wrap نمی‌شود:

<nav aria-label="Breadcrumb" class="breadcrumb">
  <a href="/">Home</a>
  <span aria-hidden="true">/</span>
  <a href="/community">Community</a>
  <span aria-hidden="true">/</span>
  <a href="/community/tutorials">Tutorials</a>
  <span aria-hidden="true">/</span>
  <span aria-current="page">Prevent line breaks</span>
</nav>

.breadcrumb {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: 0.5rem;
  overflow-x: auto;
}

وقتی ردیف از ویوپورت عریض‌تر است، overflow-x: auto به‌جای wrap کردن crumbها روی خط دوم، اسکرول‌بار افقی اضافه می‌کند.

اگر همیشه تعداد آیتم‌های ثابتی دارید، تعداد ستون‌ها را با repeat پین کنید:

.fixed-row {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  column-gap: 0.75rem;
}

max-content هر ستون را به اندازه محتوای خودش نگه می‌دارد؛ پس ردیف هرگز از چیزی که آیتم‌ها لازم دارند عریض‌تر نمی‌شود.

ترکیب text-overflow با overflow: hidden برای برش تک‌خطی

برش سه‌نقطه‌ایِ تک‌خطی، سه پراپرتی را با هم لازم دارد: white-space: nowrap، overflow: hidden و text-overflow: ellipsis. هر کدام را حذف کنید و سه‌نقطه طبق انتظار ظاهر نمی‌شود.

الگوی سه‌پراپرتی: white-space، overflow و text-overflow

هر سه تعریف لازم‌اند؛ چون هر کدام بخش متفاوتی از مسئله سه‌نقطه را حل می‌کنند. white-space: nowrap متن را روی خط منفرد نگه می‌دارد تا مرورگر بتواند overflow را درست اندازه‌گیری کند. overflow: hidden هر چیزی که از لبه باکس بگذرد را می‌برد. text-overflow: ellipsis بخش بریده‌شده را با توالی کاراکتر سه‌نقطه جایگزین می‌کند. کانتینر را عریض کنید و متن کامل برمی‌گردد؛ باریک کنید و دُم مخفی می‌شود.

مثال کد با برش سه‌نقطه‌ای

white-space: nowrap، overflow: hidden و text-overflow: ellipsis را روی عنصر عنوان داخل کارتِ محدود-به-عرض اعمال کنید:

<article class="card">
  <h2 class="card-title">
    Quarterly design review notes from the entire product team
  </h2>
</article>

.card {
  max-width: 280px;
  border: 1px solid #ddd;
  padding: 1rem;
}

.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

برش متن به چند خط با -webkit-line-clamp

برای برش چندخطی با سه‌نقطه انتهایی (دو خط، سه خط، N خط)، display: -webkit-box، -webkit-box-orient: vertical، -webkit-line-clamp: N و overflow: hidden را ترکیب کنید. مدل -webkit-box پیشونددار، امروزه تنها راه عریضاً پشتیبانی‌شده برای clamp کردن متن به چند خط است:

<article class="card">
  <h2 class="card-title">Quarterly design review notes</h2>
  <p class="card-summary">
    The product team reviewed the new dashboard layout, the migration plan
    for the legacy admin console, and the rollout schedule for the next two
    quarters. Several action items were assigned for follow-up next week.
  </p>
</article>

.card {
  max-width: 320px;
  border: 1px solid #ddd;
  padding: 1rem;
}

.card-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

خلاصه به سه خط clamp می‌شود و به‌طور خودکار با سه‌نقطه تمام می‌شود. -webkit-line-clamp را برای تعداد خط متفاوت تغییر دهید.

نکته: پراپرتی بدون پیشوندِ line-clamp و سازوکار clamp بدون پیشوند در حال پیشرفت در مشخصه CSS Overflow هستند و مرورگرهای مدرن شروع به پشتیبانی‌شان کرده‌اند. تا وقتی پوشش همگانی شود، الگوی پیشونددار -webkit- بالا را عرضه کنید و line-clamp بدون پیشوند را به‌عنوان دنباله اختیاری در نظر بگیرید.

نکته دسترس‌پذیری برای متن بریده‌شده

هر دو برش تک‌خطی و چندخطی، متن بصری را مخفی اما متن کامل را در درخت دسترس‌پذیری نگه می‌دارند؛ یعنی صفحه‌خوان‌ها همچنان محتوای کامل را می‌خوانند. این معمولاً رفتار مطلوب است؛ اما عواقبی دارد. اگر عنصر بریده‌شده لینک یا دکمه است، نام قابل‌دسترسی‌اش با چیزی که کاربر بینا می‌بیند مطابقت نمی‌کند. برای عنوان‌های طولانی در کارت‌ها، به عنصر ویژگی title بدهید؛ یا متن کامل را در Tooltip روی فوکوس و hover رندر کنید تا کاربران کیبوردی و اشاره‌گر بتوانند متن مخفی را بازیابند.

جدول مقایسه پراپرتی‌های CSS

جدول زیر پراپرتی‌های پوشش‌داده‌شده در این آموزش و سناریویی که هر کدام حل می‌کنند را خلاصه می‌کند:

پراپرتی	هدف	مقادیر رایج	نکات و دام‌ها
`white-space`	فرو دادن یا حفظ فاصله‌ها و کنترل wrap شدن خطوط	normal، nowrap، pre، pre-wrap، pre-line، break-spaces	عریضاً پشتیبانی‌شده. جلوی سرریز رشته طولانی نشکستنی را نمی‌گیرد؛ وقتی محتوا نامحدود است با overflow-wrap جفتش کنید.
`overflow-wrap`	اجازه شکست درون tokenهای طولانی برای اجتناب از overflow	normal، anywhere، break-word	عریضاً پشتیبانی‌شده. break-word و anywhere از نظر بصری یکسان اما در اندازه min-content متفاوت‌اند؛ که برای آیتم‌های flex و grid مهم است.
`word-break`	تنظیم شکست‌ها درون کلمات؛ به‌ویژه برای CJK	normal، break-all، keep-all	عریضاً پشتیبانی‌شده. مقدار منسوخِ `word-break: break-word` مقدار جداگانه‌ای بود که حذف شد؛ به‌جایش از `overflow-wrap: break-word` استفاده کنید.
`hyphens`	کنترل خط‌تیره‌گذاری خودکار	none، manual، auto	سافاری پیشوند `-webkit-hyphens` لازم دارد. `hyphens: auto` بدون ویژگی lang روی عنصر یا `<html>` هیچ کاری نمی‌کند.
`flex-wrap`	تصمیم درباره wrap شدن آیتم‌های flex به خطوط جدید	nowrap، wrap، wrap-reverse	عریضاً پشتیبانی‌شده. nowrap پیش‌فرض است. باگ کلاسیک سرریز موبایل، `min-width: auto` روی فرزندان flex است؛ نه خود flex-wrap.
`text-overflow`	استایل دادن به متن سرریزشده وقتی بریده می‌شود	clip، ellipsis، مقادیر string	عریضاً پشتیبانی‌شده. برای رندر سه‌نقطه، `overflow: hidden` (یا scroll) و `white-space: nowrap` روی همان عنصر لازم دارد.

برای جداول سازگاری به‌روز به‌ازای-پراپرتی، به MDN Web Docs مراجعه کنید.

انتخاب تکنیک درست برای مورد استفاده شما

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

راهنمای تصمیم بر اساس نوع عنصر و بافت

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

خط منفرد متن داخل یک عنصر: white-space: nowrap
پیش‌نمایش تک‌خطی با سه‌نقطه انتهایی: white-space: nowrap، overflow: hidden و text-overflow: ellipsis با هم
پیش‌نمایش چندخطی با سه‌نقطه انتهایی (۲، ۳ یا N خط): display: -webkit-box، -webkit-box-orient: vertical، -webkit-line-clamp: N و overflow: hidden
URL یا hash طولانیِ سرریزکننده کارت یا سلول جدول در چیدمان ایستا: overflow-wrap: break-word
URL یا hash طولانی داخل آیتم flex یا grid که از کوچک شدن امتناع می‌کند: overflow-wrap: anywhere روی عنصر متنی؛ به‌علاوه min-width: 0 روی فرزند flex یا grid
لینک‌های ناوبری که هرگز نباید به ردیف دوم بیفتند: flex-wrap: nowrap روی کانتینر والد؛ با min-width: 0 روی فرزندان اگر متن طولانی دارند
سرکوب خط‌تیره‌گذاری خودکار: hyphens: none به‌علاوه -webkit-hyphens: none
فعال کردن خط‌تیره‌گذاری مرورگر-محور: hyphens: auto به‌علاوه -webkit-hyphens: auto؛ و ویژگی lang روی عنصر یا ریشه <html>
محتوای CJK که شکست درون کلمات نامطلوب است: word-break: keep-all
Tokenهای متراکم خط-لاتین (hashها، base64) در کانتینرهای باریک: word-break: break-all

سوالات متداول

ساده‌ترین پراپرتی CSS برای جلوگیری از شکستن خط روی یک خط منفرد متن چیست؟

ساده‌ترین انتخاب white-space: nowrap است؛ که جلوی درج شکست خط درون متن آن عنصر توسط مرورگر را می‌گیرد. اگر هم لازم است overflow را مدیریت کنید، با محدودیت‌های عرض یا برش جفتش کنید.

چطور از شکستن خط بین دو عنصر inline مثل تگ‌های span جلوگیری کنم؟

هر دو span را در والدی بپیچید و white-space: nowrap را روی همان والد تنظیم کنید؛ یا والد را display: flex با flex-wrap: nowrap کنید تا فرزندان یک خط flex را شریک شوند. هر دو رویکرد جلوی جدا شدن جفت بین خطوط را می‌گیرند.

تفاوت white-space: nowrap و overflow: hidden چیست؟

white-space: nowrap تعیین می‌کند آیا متن ممکن است به خطوط اضافی درون عنصر wrap شود. overflow: hidden هر محتوایی را که از لبه Padding بگذرد می‌برد. آن‌ها سوالات متفاوتی را حل می‌کنند و اغلب با text-overflow: ellipsis برای برچسب‌های تک‌خطی بریده‌شده ترکیب می‌شوند.

چطور جلوی افزودن خط تیره توسط CSS هنگام شکستن کلمه طولانی بین خطوط را بگیرم؟

hyphens: none را روی عنصری که نباید خط تیره خودکار نشان دهد تنظیم و برای سافاری فعلی با -webkit-hyphens: none جفتش کنید. تأیید کنید با word-break: break-all شکست اجبار نمی‌کنید و به عنصر عرض قطعی‌ای بدهید تا رفتار wrap قابل پیش‌بینی باشد.

چطور جلوی wrap شدن آیتم‌های لیست منوی ناوبری به خط دوم را بگیرم؟

white-space: nowrap را روی هر li یا a اعمال کنید؛ یا ul را display: flex با flex-wrap: nowrap کنید و فاصله‌گذاری را با gap یا margin بدهید. هر دو الگو برچسب‌ها را تا وقتی صریحاً wrap را مجاز کنید روی یک ردیف نگه می‌دارند.

آیا white-space: nowrap روی عناصر سطح-بلوکی مثل div کار می‌کند؟

بله. white-space روی هر عنصری اعمال می‌شود؛ روی باکس بلوکی همچنان بر نحوه wrap داخلی متنش اثر می‌گذارد. بلوک ممکن است کل عرض کانتینرش را بگیرد؛ مگر اینکه عرضی تنظیم کنید؛ پس وقتی متن طولانی است برای overflow افقی یا برش برنامه‌ریزی کنید.

کدام پراپرتی CSS از شکستن خط بین فرزندان flex جلوگیری می‌کند؟

flex-wrap: nowrap را روی کانتینر flex تنظیم کنید. آن مقدار پیش‌فرض flexbox است؛ پس فرزندان تا وقتی به flex-wrap: wrap opt-in نکنید روی یک خط می‌مانند.

کدام رویکرد را برای جلوگیری از شکستن خط در چیدمان واکنش‌گرا استفاده کنم؟

در چیدمان‌های ردیفی وقتی آیتم‌ها باید روی یک خط بمانند از flex-wrap: nowrap استفاده و اگر ردیف ممکن است از ویوپورت بگذرد، overflow: auto یا overflow: hidden را روی کانتینر اضافه کنید. برای پیش‌نمایش‌های فقط-متنی، white-space: nowrap را با overflow: hidden و text-overflow: ellipsis ترکیب کنید؛ و از overflow-wrap: break-word جایی که tokenهای طولانی در غیر این صورت از کارت‌ها بیرون می‌ریزند استفاده نمایید.

نتیجه‌گیری

این مقاله white-space، overflow-wrap، word-break، hyphens، flex-wrap و text-overflow را مرور و هر پراپرتی را به تشخیصی که حل می‌کند متصل کرد: wrap شدن متن درون یک عنصر، سرریز رشته طولانی نشکستنی از کانتینر، یا جدا شدن خواهر-برادرهای inline بین خطوط. هم‌چنین برش سه‌نقطه‌ای تک‌خطی و چندخطی، قاعده min-width: 0 برای کوچک شدن فرزندان flex، الزام ویژگی lang برای hyphens: auto و تمایز min-content بین overflow-wrap: break-word و overflow-wrap: anywhere را پوشش داد.

حالا می‌توانید مسئله wrap را از علامت بصری‌اش تشخیص، پراپرتی‌ای که علت را هدف می‌گیرد انتخاب و رفع‌های سطح-متنی و سطح-چیدمانی را وقتی یک پراپرتی کافی نیست ترکیب کنید. هم‌چنین می‌توانید باگ‌های رایجی را که شبیه مسائل CSS اما در واقع مسائل اندازه‌گذاری‌اند—مثل فرزند flexی که به‌دلیل min-width: auto پیش‌فرضش از کوچک شدن امتناع می‌کند—تشخیص دهید.