CSS - text-wrap Property

Quiz

CSS text-wrap property controls how text wraps within an element. It determines whether the line should break, balance, or follow other wrapping method. It helps in improving the readability of the text.

Syntax

The syntax for the text-wrap property is as follows:

text-wrap: wrap | nowrap | balance | pretty | stable;

Property Values

CSS text-wrap property accepts the following values:

Value	Description
wrap	It is the default value. The text wraps onto the next line when needed.
nowrap	It prevents text from wrapping and keeps it on a single line.
balance	It balances the text across multiple lines for an even distribution of the words.
pretty	It is similar to wrap but uses a smart wrapping method to improve readability by keeping the orphans to a minimum.
stable	Preserves line breaks across reflows for consistent text wrapping.

Wrapping Text Onto Multiple Lines

To wrap text onto multiple lines when the text is overflowing, we use text-wrap: wrap. It is the default value.

Example

Here is an example of how to use the text-wrap property to wrap the text onto multiple lines.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS text-wrap Property</title>
    <style>
        .wrap {
            width: 200px;
            text-wrap: wrap;
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h2>Text Wrap Example</h2>
    <p class="wrap">
        This text will wrap onto multiple lines when needed.
    </p>
</body>
</html>

Prevent Text From Wrapping

To prevent text from wrapping, we use the nowrap value of the text-wrap property.

Example

In this example, we have used the text-wrap: nowrap property to prevent the text from wrapping onto the next line. The text will be displayed in a single line.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS text-wrap Property</title>
    <style>
        .nowrap {
            width: 200px;
            text-wrap: nowrap;
            border: 1px solid #000;
            padding: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <h2>No Wrap Example</h2>
    <p class="nowrap">
        This text stays in a single line and may overflow.
    </p>
</body>
</html>

Distribute Text Evenly Across Each Line

To balance the words equally in each line, we use the balance value of the text-wrap property.

Example

The following example demonstrates balanced text wrapping.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS text-wrap Property</title>
    <style>
        .balance {
            width: 200px;
            text-wrap: balance;
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h2>Balanced Text Wrapping Example</h2>
    <p class="balance">
        This example demonstrates balanced text wrapping.
    </p>
</body>
</html>

Improving Readability With pretty

To improve the readability of the text, by keeping the orphans to a minimum pretty value is used.

Example

The following example demonstrates pretty text wrapping.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS text-wrap Property</title>
    <style>
        .pretty {
            width: 200px;
            text-wrap: pretty;
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h2>Pretty Text Wrapping Example</h2>
    <p class="pretty">
        This method ensures aesthetically pleasing text wrapping.
    </p>
</body>
</html>

Maintain Consistent Wrapping

The stable value keeps line breaks stable across changes in layout For this we use the stable value of the text-wrap property.

Example

The following example demonstrates stable text wrapping.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS text-wrap Property</title>
    <style>
        .stable {
            width: 200px;
            text-wrap: stable;
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h2>Stable Wrapping Example</h2>
    <p class="stable">
        This text maintains consistent line breaks even when resized.
    </p>
</body>
</html>

Supported Browsers

Property
text-wrap	114	114	121	17.4	100

Print Page