SymbolFYI

Non-Breaking Space

Typography

Tanım

A space character (U+00A0) that prevents automatic line breaking at its position, keeping adjacent words together.

The non-breaking space (NBSP) is a space character at Unicode code point U+00A0 that behaves identically to a regular space in terms of visual appearance but prevents the text rendering engine from inserting a line break at that position. The two words or characters it separates will always remain on the same line.

Why Non-Breaking Space Matters

Automatic line wrapping in HTML and other layout systems breaks text at any whitespace character. This can produce awkward line breaks that split content that belongs together -- a number from its unit, a title from a name, an abbreviation from the word it follows:

<!-- Without NBSP: might break between "100" and "km" -->
Distance: 100 km/h

<!-- With NBSP: kept together -->
Distance: 100&nbsp;km/h

Common cases where NBSP improves typography: - Numbers and their units: 42 degrees C, 15 MB, 100 px - Titles and names: Dr. Smith, Mr. Jones - Dates: January 1, 2025 - Short words at end of line (orphan prevention in some traditions) - Thin spaces before certain punctuation in French typography

HTML Usage

<!-- Named entity (most readable) -->
&nbsp;

<!-- Hex entity -->
&#x00A0;

<!-- Decimal entity -->
&#160;

CSS Alternative

For many layout concerns, CSS white-space and text-wrap properties provide cleaner solutions:

/* Prevent line breaks inside an element entirely */
.no-wrap {
  white-space: nowrap;
}

/* Keep short phrases together without modifying HTML */
.unit {
  white-space: nowrap; /* e.g., applied to <span>100 km/h</span> */
}

/* Balance text wrapping to avoid orphaned words */
p {
  text-wrap: balance; /* Modern CSS, growing browser support */
}

NBSP vs Regular Space in JavaScript

// NBSP has a different char code than regular space
console.log(' '.charCodeAt(0));       // 32 (regular space)
console.log('\u00A0'.charCodeAt(0)); // 160 (NBSP)

// String methods may or may not treat NBSP as whitespace
const text = 'hello\u00A0world';
console.log(text.split(' ').length);     // 1 -- not split (not a regular space)
console.log(text.split('\u00A0').length); // 2 -- split correctly

// trim() does NOT remove NBSP in some environments
console.log('\u00A0hello\u00A0'.trim()); // may not be trimmed

// Use regex with Unicode whitespace class
'\u00A0hello\u00A0'.replace(/^[\s\u00A0]+|[\s\u00A0]+$/g, '');

NBSP in CSS content

/* Non-breaking space in generated content */
.citation::before {
  content: '\00A0'; /* NBSP */
}

/* Prevent breaking around em dash */
.em-dash-span {
  white-space: nowrap; /* wraps the em dash and adjacent words */
}

Troubleshooting NBSP

NBSP pasted from word processors into code or data is a frequent source of bugs -- it looks like a space but fails trim(), breaks regex word-boundary matching (\b), and causes unexpected database comparison failures:

// Normalize NBSP to regular space when cleaning user input
function normalizeSpaces(str) {
  return str.replace(/\u00A0/g, ' ').trim();
}

Many text editors display NBSP with a special marker (a small dot or underline) to make it visible.

İlgili Terimler