ช่องว่างที่ไม่ตัดบรรทัด

What is a Non-Breaking Space?

The non-breaking space (NBSP) is a space character that looks identical to a regular space but has a special typographic and semantic property: it prevents the text rendering engine from inserting a line break at that position. When a line must wrap, it will break at a regular space — but never at a non-breaking space. The two characters around an NBSP stay together, always on the same line.

Unicode code point: U+00A0, encoded in UTF-8 as 0xC2 0xA0.

When to Use a Non-Breaking Space

The non-breaking space solves the problem of orphaned words and awkward breaks in specific text patterns:

In French typography, non-breaking spaces are required before certain punctuation marks: :, ;, !, ?, » and after «. This is a strict typographic rule in French publishing.

Typing the Non-Breaking Space

• macOS: Option + Space
• Windows: Alt + 0160 (numpad), or Ctrl+Shift+Space in MS Word
• HTML:   (the most common HTML entity of all time)
• CSS: white-space: nowrap achieves a similar effect without the character itself

<!-- Keep "100" and "km" on the same line -->
100&nbsp;km

<!-- French typography -->
Bonjour&nbsp;!

<!-- Non-breaking in a span -->
<span style="white-space: nowrap">Mr. Smith</span>

NBSP vs. CSS white-space

The non-breaking space character operates at the content level — it's part of the text. CSS white-space: nowrap operates at the presentation level — it prevents wrapping for an entire element. Choose based on the situation:

• Use   when the no-break relationship is semantic (a unit and its number belong together)
• Use white-space: nowrap when you want to prevent all wrapping in a UI element (like a navigation label)
• Use width: max-content or flex-wrap: nowrap for layout-level control

The Width Gotcha

Non-breaking spaces have the same visual width as regular spaces (in most fonts), but they behave differently in:

• Trimming: JavaScript trim() does NOT remove NBSP. Use replace(/[\s\u00A0]+/g, ' ') to normalize.
• String splitting: split(' ') on a string containing NBSP will not split at the NBSP position.
• Regex: \s matches NBSP in most engines, but [ ] (literal space class) does not.

const s = "100\u00A0km";
console.log(s.trim());          // "100 km" — NBSP preserved
console.log(s.split(" "));      // ["100 km"] — no split at NBSP
console.log(s.split(/\s/));     // ["100", "km"] — \s matches NBSP

Quick Facts