HTML <nobr> Tag

What You’ll Learn

The <nobr> tag controls line breaks within text. This guide explains its purpose, deprecated status, and the modern CSS techniques beginners should use instead.

What Is the <nobr> Tag?

The <nobr> tag, short for “no break”, is an HTML element used to prevent line breaks within a specific section of text. It instructs the browser to render the enclosed text without wrapping it to the next line, keeping it as a single continuous unit.

Learn nobr to read legacy HTML. For phone numbers, brand names, and code snippets that must stay together, apply a CSS class with white-space: nowrap instead.

🚫 Deprecated Status

As of HTML5, the <nobr> tag has been deprecated and is not recommended for use in modern web development practices. While it may still render in some browsers for backward compatibility, its usage is discouraged in favor of more semantic and flexible CSS alternatives.

• Non-standard element, never part of the official HTML5 specification.
• Browsers may still apply no-wrap behavior on legacy pages.
• New projects should use white-space: nowrap instead.

📝 Syntax

To implement the <nobr> tag, enclose the desired text within opening and closing tags (usage is now discouraged):

<nobr>Your Text Here</nobr>

Syntax Rules

• Requires both opening <nobr> and closing </nobr> tags.
• Can wrap inline text inside block elements like <p>.
• Does not accept any tag-specific attributes.
• Modern replacement: class="nobr-text" with white-space: nowrap.

⚖️ <nobr> vs white-space: nowrap

Examples Gallery

Legacy nobr markup and the recommended CSS white-space: nowrap replacement.

<p><nobr>This text should not break</nobr> when displayed in a browser window.</p>

.nobr-text {
  white-space: nowrap;
}

<p class="nobr-text">This text will not break</p>

🔄 Alternatives

Replace <nobr> with these modern techniques:

CSS Property: white-space

Set white-space: nowrap on any element to prevent line breaks inside it.

.phone-number,
.brand-name,
.nobr-text {
  white-space: nowrap;
}

• <wbr> — Suggest optional break points (opposite of nobr).
• overflow-x: auto — Allow horizontal scroll on small screens when nowrap is required.
• Responsive design — Allow wrapping on mobile unless a break truly breaks meaning.

♿ Accessibility

Preventing line breaks affects readability on small screens:

• Horizontal overflow — nowrap can cause text to extend beyond the viewport on mobile.
• Zoom users — Large text may not wrap, making content harder to read.
• Use sparingly — Only prevent breaks for short phrases (dates, codes, brand names).
• Test on mobile — Verify nowrap text does not break your layout at 320px width.

💡 Best Practices

Given its deprecated status, avoid using the <nobr> tag in new projects. Use modern CSS techniques such as white-space: nowrap to achieve similar results while maintaining semantic HTML markup.