To keep a spaced punctuation mark with its preceding word on a web page, replace the ordinary space with a nonbreaking space, or wrap the pair in a small CSS no-wrap span. On your Mac, use a local HTML test to check the result at different widths.

This guide is for someone editing a page’s text or HTML on a Mac—for example, an abstract tile label such as Beta : in a narrow card. The task is to preserve the visible gap while preventing the colon from wrapping onto the next line by itself. The examples deliberately retain that spacing.

Which fix should you choose?

Start by deciding whether the spacing rule belongs in the text itself or in the page’s presentation. Unicode defines U+00A0 NO-BREAK SPACE as the nonbreaking counterpart of an ordinary space, and U+202F NARROW NO-BREAK SPACE as its narrower variant. These give you two different visible spacing choices. Unicode Standard, Chapter 6

Your editing situation Recommended starting point What to check
You can change the text and want a normal-width gap Replace the ordinary space with U+00A0 The saved text still contains the nonbreaking character
You intentionally want a narrower gap Use U+202F The result looks appropriate in the page’s actual font
You want to retain an ordinary space in the text Apply white-space: nowrap to a span containing the whole pair The span includes the word, space and punctuation
You can only view the page Make the correction in its editable source or ask its maintainer A local experiment does not change the original page

For HTML source, write Beta :. The WHATWG character-reference table maps   to U+00A0. Replace the existing space; do not leave an ordinary space before the reference. HTML Standard: Named character references

For a presentation rule, put Beta : inside an inline span and apply white-space: nowrap to that span. Keep the surrounding paragraph free to wrap normally. MDN documents white-space as controlling both whitespace handling and wrapping. MDN: white-space

The practical decision is how much text must stay together. For this example, protect only Beta :. Protecting Tile Alpha Beta : Next tile would unnecessarily restrict the entire label. Start with the smallest unit that expresses the intended relationship.

How to make a local test with TextEdit

Create a separate test file before changing an existing page. Apple documents using TextEdit in plain-text mode to create HTML files, saving with an .html extension, and choosing Use .html when prompted. Work with HTML documents in TextEdit on Mac

  1. Open TextEdit and choose File > New.
  2. Choose Format > Make Plain Text.
  3. Paste the complete example below.
  4. Choose File > Save and name the file punctuation-test.html.
  5. If prompted, choose Use .html.
  6. In Safari, use File > Open File to open the saved file.

This is a complete standalone HTML document. It needs no library, installation or network connection. The three cards use identical synthetic text, with a different treatment of the space before the colon in each card.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Punctuation wrap test</title>
<style>
  body {
    font: 20px/1.5 system-ui, sans-serif;
    margin: 2rem;
  }
  .card {
    width: 14ch;
    max-width: 100%;
    border: 1px solid #888;
    padding: 1rem;
    margin-block: 1rem;
  }
  .pair {
    white-space: nowrap;
  }
</style>
<h1>Punctuation wrap test</h1>
<h2>Ordinary space</h2>
<p class="card">Tile Alpha Beta : Next tile</p>
<h2>Nonbreaking space</h2>
<p class="card">Tile Alpha Beta&nbsp;: Next tile</p>
<h2>Local no-wrap rule</h2>
<p class="card">Tile Alpha <span class="pair">Beta :</span> Next tile</p>
</html>

The sample’s character-reference conversion was checked with a parser: &nbsp; resolves to U+00A0. Browser rendering was not executed during preparation. Use the following comparison to check layout in your Mac browser.

Compare the boundary, not one screenshot

The illustrative 14ch width is a starting point, not a promised breakpoint. Change it to 10ch, save, reload, and then try 18ch. Look for a width where the ordinary-space card separates the colon from Beta. In the two protected versions, the intended result is for Beta and the colon to remain together while other words can move.

If all three cards initially look alike, that does not establish that the space treatments are equivalent. You may simply have enough room for the pair. Vary the width until the relevant boundary reaches the line ending, then enlarge the text and repeat.

When reopening the file in TextEdit, use File > Open, select the file, choose Show Options, and select Ignore rich text commands if necessary. Apple also documents the setting Display HTML files as HTML code instead of formatted text. These options let you edit the source directly. Apple’s TextEdit HTML instructions

Why might a nonbreaking space still fail?

A nonbreaking character works within the browser’s text-flow rules. Before adding more invisible characters, check whether the failure comes from the content, an overriding CSS rule, or a layout boundary.

The page is displaying the reference literally

If the page shows the characters &nbsp;, your entry was treated as text rather than parsed as an HTML character reference. In an HTML source field, use Beta&nbsp;:. In an ordinary text field, insert the actual nonbreaking character instead.

The same distinction applies to JavaScript. Assigning a string through textContent creates text; it does not parse HTML references. A JavaScript string can contain the character as "Beta\u00A0:". Also avoid assigning textContent to a whole formatted paragraph merely to fix one gap: doing so replaces its existing children. MDN: Node.textContent

A CSS rule permits unusually aggressive wrapping

Check for line-break: anywhere. MDN documents that this value permits breaks around typographic character units while disregarding prohibitions associated with glue and word-joiner classes. An added nonbreaking character therefore cannot be treated as an unconditional override of that setting. MDN: line-break

Also inspect overflow-wrap. Its anywhere value allows an otherwise unbreakable sequence to split when necessary to avoid overflow. That emergency behavior differs from an ordinary break at a space. MDN: overflow-wrap

Use a local no-wrap span when the presentation requires the entire short pair to stay intact. Check the rule actually applied to that span, especially if a page stylesheet contains more specific selectors. Keep the correction local so unrelated long text retains its existing wrapping behavior.

The punctuation occupies a separate layout box

Inspect whether the colon is ordinary inline text or sits inside an inline-block or another atomic inline. W3C specifies special break opportunities around atomic inlines, including an exception involving adjacent no-break spaces. A space inserted beside such a box is not equivalent to a space within one continuous text run. CSS Text Module Level 3: Line Breaking Details

For this simple label, keep the word, gap and punctuation in one ordinary inline span. Remove an explicit <br> between them if the intended behavior is automatic wrapping; nowrap suppresses soft wrapping rather than eliminating forced breaks. CSS Text Module Level 3: White Space and Wrapping

How do you preserve browser shaping and handle tight layouts?

Keep each word intact instead of wrapping its individual letters. W3C defines when shaping must continue across inline boundaries and when changes such as intervening padding, borders or alignment require it to break. A plain inline span avoids introducing unnecessary formatting boundaries. CSS Text Module Level 3: Shaping Across Element Boundaries

There is still a physical constraint: the protected pair needs enough horizontal room. If the container becomes narrower than Beta :, keeping the pair together can produce overflow. Test that condition deliberately. Then choose a layout response, such as widening the card or shortening its label, instead of hiding the affected text. The no-wrap behavior is documented by W3C’s white-space definition.

Do you need a line-breaking library?

For an ordinary browser page, this task does not require one. The named library linebreak computes Unicode break opportunities; its documentation explicitly leaves actual line selection to software that knows the available width and displayed text size. Its README currently states Unicode version 13 support. foliojs/linebreak documentation

That boundary matters if another tool already uses the library. A list of possible breaks does not establish where a browser will wrap shaped text. For this page-editing task, leave font shaping and final line layout to the browser and express the desired constraint through the character or local CSS.

Before transferring the fix, confirm three things: the gap remains visible, the word and punctuation stay together near a line ending, and surrounding text can still wrap. Use a nonbreaking space when the relationship belongs in the text, or a narrowly scoped no-wrap span when it belongs in the presentation. Recheck the actual page at its narrowest useful width.

Sources