How Can I Prevent Unwanted Line Breaks After Hyphens in HTML?

Eliminating Line Breaks After Hyphens

When hyphens appear near the end of a line, they can cause unsightly word breaks. To address this issue and maintain browser compatibility, consider using the non-breaking hyphen character, ‑.

Example:

The text "3-3/8"" when rendered in HTML as "3-3/8”" experiences line breaks at the hyphen.

Previous Attempts:

Inserting the "zero width no break character", , proved ineffective.

Solution:

Simply replace the regular hyphen with the non-breaking hyphen character, ‑.

Usage:

To prevent line breaks after specific hyphens, insert ‑ in place of the hyphen. This character acts like a regular hyphen but prevents line breaks.

Browser Compatibility:

The non-breaking hyphen is supported in all major browsers, including Safari.

Note:

This solution applies to specific instances where line breaks after hyphens are undesirable. It's not intended as a global solution for entire pages.

The above is the detailed content of How Can I Prevent Unwanted Line Breaks After Hyphens in HTML?. For more information, please follow other related articles on the PHP Chinese website!