How to stop text from taking up more than 1 line ?

Last Updated : 08 Jun, 2022

In this article, we will see how to stop the text from taking up more than 1 line using the CSS properties, & will understand to implement it. There are specific CSS properties that can be applied to control or prevent line breaks on a block of text by implementing the white-space and overflow properties. The following are the CSS properties that can be implemented, are described below:

white-space: This CSS property is used to set how the inner white space of the element will be handled. By setting this property to nowrap, the text inside the element will be one line only but still, there might be some overflow of text out of the element boundaries.
overflow: This CSS will set the behavior of an element’s overflow, as required. By setting this property to hidden, the text inside the element will stay within the boundaries of the element.
text-overflow (optional): This CSS property controls how users are notified of hidden overflow content. By setting this property to ellipsis, the overflow text will be signaled with three dots[…].

Note: The overflow property can be set to scroll but then avoid the use of the text-overflow property.

Example: The following example shows how you can stop your text from taking up more than 1 line using the CSS properties.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        * {
            margin: 20px;
        }
         
        div {
            width: 500px;
            height: 20px;
            border: 2px red solid;
        }
         
        .property1 {
            white-space: nowrap;
        }
         
        .property1and2 {
            white-space: nowrap;
            overflow: hidden;
        }
         
        .property1and2and3 {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h3>
        How to stop text from taking up more than 1 line?
    </h3>
    <div>
        we will see how stop text from taking up more
        than 1 line. In order to do so we will use 
        following css properties - 
    </div>
    <h3>white-space Property</h3>
    <div class='property1'> 
        The white-space property in CSS is used to
        control the text wrapping and white-spacing 
        ie., this property can be used to set about
        the handling of the white-space inside the elements.
        There are several types of values in this 
        property to use. 
    </div>
    <h3>overflow Property</h3>
    <div class='property1and2'>
        The CSS overflow controls the big content. 
        It tells whether to clip content or to add 
        scroll bars. 
    </div>
    <h3>text-overflow Property</h3>
    <div class='property1and2and3'> 
        A text-overflow property in CSS is used
        to specify that some text has overflow
        and hidden from view. The white-space property
        must be set to nowrap and the overflow property must 
        be set to hidden. 
    </div>
</body>
</html>