CSS Hyphens Property

The CSS Hyphens Property is a powerful tool that allows web developers to control how text is hyphenated when it overflows its containing element. Understanding this property is important for creating visually pleasing and readable websites. This article will cover the definition, browser support, syntax, and property values of the CSS Hyphens property, along with practical examples.

Definition

What is the CSS Hyphens Property?

The CSS Hyphens Property specifies how words that are too long to fit within their containing element should be hyphenated at the end of a line. This allows for better text justification and can improve the overall aesthetics of the text layout. It is especially useful in responsive designs where text may need to adjust according to varying screen sizes.

Browser Support

Supported Browsers

The CSS Hyphens Property is widely supported in most modern web browsers. Below is a table summarizing the support:

Browser	Support
Google Chrome	Supported from version 34
Mozilla Firefox	Supported from version 28
Safari	Supported from version 6
Microsoft Edge	Supported from version 12
Internet Explorer	Not supported

Syntax

CSS Hyphens Syntax

The basic syntax for using the CSS Hyphens Property is as follows:

selector {
    hyphens: value;
}

Replace selector with your target element (like a paragraph or heading), and value with one of the property values discussed below.

Property Values

Value: none

The value none disables hyphenation, meaning words will not be hyphenated even if they are too long for their container.

p {
    hyphens: none;
}

Value: manual

The value manual allows developers to insert hyphens manually by using the hyphenation character (U+00AD) in the text. This gives more control over where words break and ensures that hyphenation aligns with the developer’s design choices.

p {
    hyphens: manual;
}

Value: auto

The value auto enables the browser to automatically insert hyphens based on language-specific rules. This is often the best value for languages like English, as it takes care of hyphenation intelligently without manual intervention.

p {
    hyphens: auto;
}

Examples

Example of the CSS Hyphens Property

Below is an example demonstrating the CSS Hyphens Property in action:

In the example above, you can apply different values to see how they behave:

.hyphen-demo.hyphen-none {
    hyphens: none;
}

.hyphen-demo.hyphen-manual {
    hyphens: manual;
}

.hyphen-demo.hyphen-auto {
    hyphens: auto;
}

Related Pages

CSS Text Properties

The CSS Text Properties are crucial for controlling how text is displayed on webpages. This includes properties like text-align, text-transform, and text-shadow.

CSS Text Formatting

CSS Text Formatting involves various styles to apply to text elements, enhancing their presentation and making them more user-friendly and visually appealing.

CSS Font Properties

For further customization, you can explore CSS Font Properties to control the type, size, style, weight, and line height of your text to improve your web design.

FAQ

What is the main purpose of the CSS Hyphens Property?

The main purpose is to control the hyphenation of long words that exceed the width of their container, improving readability and layout aesthetics.

Can I use the Hyphens property on all text elements?

Yes, you can apply the CSS Hyphens Property to almost any text-based HTML element, including paragraphs, headings, and spans.

Is the Hyphens Property essential for all designs?

While it’s not essential, it can greatly enhance text presentation, especially in responsive designs where text might overflow its container.

How do I choose between manual and auto hyphenation?

Use manual when you need precise control over where hyphens appear. Use auto for a more fluid, automatic hyphenation based on the language’s rules.