How to Prevent Line Breaks at Hyphens in All Browsers?

Preventing Line Breaks at Hyphens in All Browsers

In web design, it can be desirable to prevent line breaks from occurring at hyphens, as they can disrupt the readability and visual appeal of text. This is especially true for long articles or passages input through content management systems like CKEditor.

To address this issue, you can employ Unicode's NON-BREAKING HYPHEN (U 2011), denoted as ‑ in HTML. This special character prevents line breaks from occurring at the specified hyphen, maintaining the integrity of hyphenated words.

In HTML, you can implement the NON-BREAKING HYPHEN using the character entity references:

• ‑
• ‑

For example:

<p>This is a-non<span>&#x2011;</span>breaking hyphen in all browsers.</p>

It's worth noting that the NON-BREAKING HYPHEN does not affect hyphenation rules. Words that would normally span multiple lines will still hyphenate, but the hyphen will not cause a line break.

Additionally, some advanced CSS techniques can be used to prevent line breaks at hyphens. However, such methods may have cross-browser compatibility issues and are not as reliable as using the Unicode character.

The above is the detailed content of How to Prevent Line Breaks at Hyphens in All Browsers?. For more information, please follow other related articles on the PHP Chinese website!