How to prevent text in a table cell from wrapping using CSS?

Last Updated : 23 Sep, 2024

Preventing text from wrapping in a table cell ensures the content stays on one line, maintaining the layout's integrity. Using the CSS property white-space: nowrap;, you can control text behavior, avoiding unwanted line breaks within table cells.

Syntax:

white-space: normal|nowrap|pre|pre-wrap|pre-line;

Example 1: In this example we use the white-space: nowrap; CSS property within the <th> tags to prevent text from wrapping in table headers. It ensures that the headings remain on a single line.

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <title>white-space property</title>

    <style>
        th {
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <table border="1" collap>
        <thead>
            <tr>
                <th>First Heading of GeeksforGeeks</th>
                <th>Second Heading of GeeksforGeeks</th>
                <th>Third Heading of GeeksforGeeks</th>
                <th>Fourth Heading of GeeksforGeeks</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

Output:

Example 2: In this example we use the white-space: nowrap; CSS property on specific table headers (<th>) to prevent text wrapping, ensuring the first and third headings stay on a single line within the table.

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <title>white-space property</title>
</head>

<body>
    <table border="1" collap>
        <thead>
            <tr>
                <th style="white-space: nowrap;">
                    First Heading of GeeksforGeeks
                </th>

                <th>Second Heading of GeeksforGeeks</th>

                <th style="white-space: nowrap;">
                    Third Heading of GeeksforGeeks
                </th>

                <th>Fourth Heading of GeeksforGeeks</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

Output:

Preventing text wrapping in table cells is essential for maintaining a clean and organized table layout, especially when dealing with long strings of text. By utilizing the CSS white-space property, you can control text behavior within your tables, ensuring that content remains on a single line.