In responsive web design, text wraps automatically to fit screen width. However, certain word pairs look awkward or confusing when separated across a line break:
- Numerical quantities and units (e.g. '10 km' or '50 kg').
- Currency values and denominations (e.g. '$100 million').
- Compound names and titles (e.g. 'Chapter 12' or 'World War II').
- Brand names (e.g. 'iPhone 15').
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Non-Breaking Space Showcase</title>
<style>
.restricted-box { max-width: 180px; border: 1px dashed #cbd5e1; padding: 10px; margin-bottom: 15px; }
.nowrap-badge { white-space: nowrap; background: #e0f2fe; padding: 4px 8px; border-radius: 4px; }
</style>
</head>
<body>
<h2>Non-Breaking Space (&nbsp;) Demonstration</h2>
<div class="restricted-box">
<!-- Without NBSP: Unit might wrap awkwardly onto new line -->
<p>Without NBSP: The speed limit is 100 km/h on this highway.</p>
</div>
<div class="restricted-box">
<!-- With NBSP: "100 km/h" is guaranteed to stay on the same line! -->
<p>With NBSP: The speed limit is 100 km/h on this highway.</p>
</div>
<p>Financial Figure: The acquisition was valued at $45 billion.</p>
<p>CSS Alternative: <span class="nowrap-badge">Strictly No Line Breaking Here</span></p>
</body>
</html>