タイポグラフィ

ノーブレークスペース

U+00A0。その位置での改行を防ぐスペース。HTML: 。数字と単位(100 km)・固有名詞(Mr. Smith)・略語の後などに使われます。

· Updated

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:

Use Case Example Without NBSP With NBSP
Number + unit 100 km "100" then "km" on next line Always together
Title + name Mr. Smith "Mr." alone at line end Always together
Date parts 25 January "25" alone Always together
Currency $1,000 May break oddly Protected
Phone numbers +1 800 555 Can break mid-number Protected
French guillemets « bonjour » Space before » might wrap Protected

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 &nbsp; 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

Property Value
Unicode code point U+00A0
Unicode name NO-BREAK SPACE
UTF-8 encoding 0xC2 0xA0 (2 bytes)
HTML entity &nbsp;
macOS shortcut Option + Space
Windows shortcut Alt + 0160
Visual appearance Identical to regular space
Line break behavior Never breaks here
JavaScript trim() Does NOT remove NBSP

関連用語

タイポグラフィ のその他の用語

CSS unicode-range

CSS @font-face descriptor specifying which Unicode code points a font should cover. …

Em / En(タイポグラフィ単位)

Em:フォントサイズと等しい幅。En:Emの半分。エムダッシュ幅・エムスペース・エンスペース・CSSユニット(1em・0.5em)の定義に使われます。

Font Fallback

The mechanism by which a rendering engine substitutes glyphs from a secondary …

OpenType

Modern font format developed by Microsoft and Adobe supporting up to 65,535 …

RTL(右から左)

文字が右から左に流れるテキスト方向。アラビア語・ヘブライ語・ターナ文字などで使われ、正しい表示のために双方向アルゴリズムが必要です。

Web Fonts

Fonts downloaded by the browser to render text, declared via CSS @font-face. …

カーニング

視覚的な調和のために特定の文字ペア(例:AV・To・LT)間のスペーシングを調整すること。Unicodeの概念ではなくフォント機能ですが、Unicodeテキストのレンダリングに影響します。

グリフ

フォントによってレンダリングされる文字の視覚的表現。1つの文字が複数のグリフを持つ場合があり(合字・文脈形態)、1つのグリフが複数の文字を表す場合もあります。

スモールキャップス

小文字の高さの大文字字形。CSS:font-variant: small-caps。Unicodeにはラテン拡張(ᴀ〜ᴢ)に実際のスモールキャップス文字があります。

ゼロ幅文字

前進幅がゼロの文字 — レンダリングでは見えませんがテキスト動作に影響します。ZWSP(単語区切り)・ZWJ(結合)・ZWNJ(結合防止)・WJ(改行防止)などがあります。