## CSS3 text-wrap Property
The `text-wrap` property in CSS3 is designed to control how text wraps when it reaches the boundary of its containing element. It gives developers precise control over line-breaking behaviors, allowing you to prevent wrapping entirely, restrict it to standard break points, or force wrapping at any character.
---
## Browser Support
Historically, the original CSS3 draft values for `text-wrap` (such as `none`, `unrestricted`, and `suppress`) had extremely limited or no support across major browsers.
However, modern CSS Text Module Level 4 has updated and revived the `text-wrap` property with new values (like `balance`, `pretty`, and `stable`). Modern browsers (Chrome, Edge, Safari, and Firefox) now widely support these modern values, while the legacy CSS3 values remain largely unsupported or have been superseded by other properties like `white-space`.
---
## Definition and Usage
The `text-wrap` property specifies the line-breaking rules for text layout. It determines whether text is allowed to wrap to a new line and how those line breaks are distributed.
### Property Specifications
| Feature | Description |
| :--- | :--- |
| **Default Value** | `normal` |
| **Inherited** | Yes |
| **CSS Version** | CSS3 / CSS Text Module Level 4 |
| **JavaScript Syntax** | `object.style.textWrap = "none"` |
---
## Syntax
```css
/* Legacy CSS3 Draft Syntax */
text-wrap: normal | none | unrestricted | suppress;
/* Modern CSS Text Level 4 Syntax (Widely Supported) */
text-wrap: wrap | nowrap | balance | pretty | stable;
```
### Value Descriptions
#### Legacy CSS3 Values
* **`normal`**: Text wraps only at allowed break points (such as spaces or hyphens). This is the default behavior.
* **`none`**: Text does not wrap. Text that exceeds the width of the container will overflow.
* **`unrestricted`**: Text can wrap between any two consecutive characters, even within words.
* **`suppress`**: Line breaks within the element are suppressed. The browser will only break the line if there are no other valid break points available.
#### Modern CSS Values (Recommended for Production)
* **`wrap`**: Text is wrapped normally across multiple lines if it exceeds the container width.
* **`nowrap`**: Text does not wrap; it behaves identically to `white-space: nowrap`.
* **`balance`**: The browser balances the length of each line of text to avoid typographic "orphans" and make block text look more symmetrical (ideal for short headings).
* **`pretty`**: The browser uses a slower, higher-quality layout algorithm to prevent single-word wrap-offs on the final line (ideal for body paragraphs).
---
## Code Examples
### Example 1: Preventing Line Breaks (Legacy `none` / Modern `nowrap`)
This example demonstrates how to prevent text from wrapping to a new line, forcing it to stay on a single line and overflow its container if necessary.
```html
Preventing Text Wrapping
This is a long sentence that will not wrap to the next line because wrapping has been disabled.
```
### Example 2: Modern Text Wrapping Balance (Recommended for Headings)
The modern `balance` value is highly useful for making headings look visually appealing by ensuring lines are roughly equal in length.
```css
h1, h2 {
text-wrap: balance; /* Automatically balances line lengths */
}
```
---
## Considerations & Best Practices
1. **Backward Compatibility**: Because the legacy values (`none`, `unrestricted`, `suppress`) never gained mainstream browser adoption, you should use the standard `white-space` property (e.g., `white-space: nowrap`) if your goal is to prevent text wrapping in older environments.
2. **Modern Layouts**: For modern web design, use `text-wrap: balance` for titles/headings and `text-wrap: pretty` for body text to significantly improve the typography and readability of your website.
YouTip