`` - No Line Break (Deprecated)

The `` Element

Deprecated Non-standard

The  element was a non-standard HTML element that prevented line breaks within its content. Text wrapped in  tags would not wrap to the next line, even if it exceeded the width of its container.

Historical Example

This is how  was used in the past:

<!-- DO NOT USE: This is deprecated -->
<p>This text might wrap, but <nobr>this text will never wrap no matter how long it is</nobr>.</p>

<p style="width: 200px; border: 1px solid #ccc;">
Narrow container: <nobr>This long text won't break across lines</nobr>
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- DO NOT USE: This is deprecated -->
<p>This text might wrap, but <nobr>this text will never wrap no matter how long it is</nobr>.</p>

<p style="width: 200px; border: 1px solid #ccc;">
Narrow container: <nobr>This long text won't break across lines</nobr>
</p>

Why It’s Deprecated

The  element was deprecated for several important reasons:

Never Standardized: Unlike most HTML elements,  was never part of any W3C or WHATWG specification. It was a proprietary extension that some browsers implemented inconsistently.

CSS Does It Better: The CSS white-space property provides a standardized, more flexible way to control text wrapping behavior with better browser support and maintainability.

Semantic Issues:  mixed presentation with content structure, violating the principle of separation of concerns that modern web development embraces.

Limited Control: Unlike CSS,  offered no fine-grained control over text behavior in different contexts or screen sizes.

Modern Alternatives

CSS white-space: nowrap

The standard replacement for  is the CSS white-space property:

<style>
.no-wrap {
  white-space: nowrap;
}

.demo-container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

<p class="demo-container">
This text might wrap, but <span class="no-wrap">this text will never wrap no matter how long it is</span>.
</p>

<p class="demo-container">
<span class="no-wrap">Entire paragraph won't wrap either</span>
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.no-wrap {
  white-space: nowrap;
}

.demo-container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

<p class="demo-container">
This text might wrap, but <span class="no-wrap">this text will never wrap no matter how long it is</span>.
</p>

<p class="demo-container">
<span class="no-wrap">Entire paragraph won't wrap either</span>
</p>

This approach provides the same functionality as  but with better browser support and standards compliance.

CSS word-break and overflow-wrap

For more nuanced control over text breaking behavior:

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}

.keep-together {
  overflow-wrap: normal;
  word-break: keep-all;
}

.allow-break {
  overflow-wrap: break-word;
}
</style>

<div class="container keep-together">
VeryLongWordThatWontBreakEvenInSmallContainers
</div>

<div class="container allow-break">
VeryLongWordThatWillBreakIfNeeded
</div>

<div class="container">
<span style="white-space: nowrap;">Keep this phrase together</span> but allow this part to wrap normally
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}

.keep-together {
  overflow-wrap: normal;
  word-break: keep-all;
}

.allow-break {
  overflow-wrap: break-word;
}
</style>

<div class="container keep-together">
VeryLongWordThatWontBreakEvenInSmallContainers
</div>

<div class="container allow-break">
VeryLongWordThatWillBreakIfNeeded
</div>

<div class="container">
<span style="white-space: nowrap;">Keep this phrase together</span> but allow this part to wrap normally
</div>

Using   for Specific Non-Breaking Spaces

For preventing breaks at specific points, use non-breaking space entities:

<style>
.narrow {
  width: 250px;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

<div class="narrow">
<p>Price: $99.99 USD (may break awkwardly)</p>

<p>Price: $99.99&nbsp;USD (stays together)</p>

<p>Phone: 1-555-123-4567 (may break)</p>

<p>Phone: 1&#8209;555&#8209;123&#8209;4567 (non-breaking hyphens)</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.narrow {
  width: 250px;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

<div class="narrow">
<p>Price: $99.99 USD (may break awkwardly)</p>

<p>Price: $99.99&nbsp;USD (stays together)</p>

<p>Phone: 1-555-123-4567 (may break)</p>

<p>Phone: 1&#8209;555&#8209;123&#8209;4567 (non-breaking hyphens)</p>
</div>

Using `` for Suggesting Break Points

The  element lets you suggest where breaks are allowed in long text:

<style>
.url-container {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  word-break: break-all;
}

.url-smart {
  word-break: normal;
}
</style>

<div class="url-container">
<p>Without wbr: https://www.example.com/very/long/path/to/resource</p>

<p class="url-smart">With wbr: https://<wbr>www.example.com/<wbr>very/<wbr>long/<wbr>path/<wbr>to/<wbr>resource</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.url-container {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  word-break: break-all;
}

.url-smart {
  word-break: normal;
}
</style>

<div class="url-container">
<p>Without wbr: https://www.example.com/very/long/path/to/resource</p>

<p class="url-smart">With wbr: https://<wbr>www.example.com/<wbr>very/<wbr>long/<wbr>path/<wbr>to/<wbr>resource</p>
</div>

When to Prevent Line Breaks

There are legitimate cases where preventing line breaks improves readability:

Numeric Values with Units: Keep numbers with their units (100 km, $50 USD, 5 GB)

Proper Names: Company names, product names, or titles that should stay together

Code Snippets: Short inline code that shouldn’t break mid-identifier

Date and Time: Keep date/time components together (Jan 15, 2024)

Mathematical Expressions: Simple equations or formulas (E = mc²)

Phone Numbers: Keep area codes with numbers

<style>
.nowrap { white-space: nowrap; }
.article {
  max-width: 300px;
  border: 1px solid #ccc;
  padding: 15px;
}
</style>

<article class="article">
<p>
  The package weighs <span class="nowrap">2.5 kg</span> and costs
  <span class="nowrap">$49.99 USD</span>. It will arrive by
  <span class="nowrap">Jan 15, 2024</span>.
</p>

<p>
  Contact us at <span class="nowrap">1-800-555-0123</span> or visit
  <span class="nowrap">Example Corp</span> headquarters.
</p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.nowrap { white-space: nowrap; }
.article {
  max-width: 300px;
  border: 1px solid #ccc;
  padding: 15px;
}
</style>

<article class="article">
<p>
  The package weighs <span class="nowrap">2.5 kg</span> and costs
  <span class="nowrap">$49.99 USD</span>. It will arrive by
  <span class="nowrap">Jan 15, 2024</span>.
</p>

<p>
  Contact us at <span class="nowrap">1-800-555-0123</span> or visit
  <span class="nowrap">Example Corp</span> headquarters.
</p>
</article>

Migration Guide

If you’re maintaining legacy code that uses , here’s how to migrate:

<p>
  Price: <nobr>$99.99 USD</nobr>
</p>

<div>
  <nobr>This entire section should not wrap</nobr>
</div>

<style>
  .nowrap {
    white-space: nowrap;
  }
</style>

<p>
  Price: <span class="nowrap">$99.99 USD</span>
</p>

<div class="nowrap">
  This entire section should not wrap
</div>

<!-- Using a utility CSS framework like Tailwind -->
<p>
  Price: <span class="whitespace-nowrap">$99.99 USD</span>
</p>

<div class="whitespace-nowrap">
  This entire section should not wrap
</div>

Migration Steps

Step 1: Identify all  elements in your codebase using search or grep.

Step 2: Create a CSS class for non-wrapping text:

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

Step 3: Replace  tags with :

<!-- Before -->
<nobr>text</nobr>

<!-- After -->
<span class="no-wrap">text</span>

Step 4: For block-level elements, apply the class directly:

<!-- Before -->
<div><nobr>content</nobr></div>

<!-- After -->
<div class="no-wrap">content</div>

Step 5: Test thoroughly, especially on narrow viewports and mobile devices.

Historical Browser Support

The  element was never standardized, but had varying support:

Browser	Support Period	Notes
Internet Explorer	3.0 - 11	Implemented as proprietary extension
Netscape	2.0 - 4.x	Early implementation
Firefox	Removed	Deprecated, use CSS instead
Chrome	Removed	Deprecated, use CSS instead
Safari	Removed	Deprecated, use CSS instead
Edge	Never supported	Modern browsers only

Suggests an optional line break opportunity within text. Learn more →

Forces a line break at a specific point. Learn more →

Specifications

The  element was never part of any official HTML specification:

Not in WHATWG HTML Living Standard: The element is not recognized in the current HTML standard.

Not in W3C HTML5: Never included in any W3C HTML specification.

Historical Reference: Mentioned in historical browser documentation as a proprietary extension.

Modern Equivalent: CSS white-space: nowrap property (CSS Text Module Level 3)

`<nobr>` - No Line Break (Deprecated)

The `<nobr>` Element

Historical Example

Why It’s Deprecated

Modern Alternatives

CSS white-space: nowrap

CSS word-break and overflow-wrap

Using   for Specific Non-Breaking Spaces

Using `<wbr>` for Suggesting Break Points

When to Prevent Line Breaks

Migration Guide

Migration Steps

Historical Browser Support

Specifications

`<nobr>` - No Line Break (Deprecated)

The <nobr> Element

Historical Example

Why It’s Deprecated

Modern Alternatives

CSS white-space: nowrap

CSS word-break and overflow-wrap

Using &nbsp; for Specific Non-Breaking Spaces

Using <wbr> for Suggesting Break Points

When to Prevent Line Breaks

Migration Guide

Migration Steps

Historical Browser Support

Related Elements

Specifications

The `<nobr>` Element

Using for Specific Non-Breaking Spaces

Using `<wbr>` for Suggesting Break Points