Skip to content
Related Articles

Related Articles

Improve Article

How to prevent text from taking more than one line in SASS ?

  • Last Updated : 02 Jun, 2021

Sometimes we want to display the text in our webpage by preventing the text from taking up more than one line or something which will stop the word wrapping. It can be done by easily adding some attributes in the sass file. 

Approach: We start creating a simple HTML file to which we would add some text in the body using <p> tag. Then create a sass file and name it “style”. The extension for this file is “.scss”. Now we will add the code which will prevent it from taking up more than 1 line. Here we will be using 2 attributes named white-space and overflow. The value of white-space would be nowrap and the value of overflow would be hidden. After doing this, we will save the file and convert it into a CSS file using any sass compiler. If you are using Visual Studio Code, you can install an extension called “Live Sass Compiler” which will do the work for you. Finally, we will link our CSS file in the head tag of the HTML file that we created earlier. 

Attributes used: 

  1. white-space: It helps to set how the white space and line breaks inside the element’s text is handled.
  2. overflow: It controls what happens to the content that is too big to fit in its block formatting context.

We will set the value of attributes: 

  • nowrap” to white-space attribute which collapses whitespaces into one but suppresses line breaks.
  • hidden” to overflow attribute which clips the overflow and the rest of the content will be made invisible.

Below is the code for style.scss file: 

div {
    white-space: nowrap;
    overflow: hidden; 
}

Compile and convert it into css using any Sass Compiler. There would be a new file created in the same folder named as style.css. Now, link the file into the html.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <!--Linked the css file which was 
    compiled using the Sass compiler-->
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <div>
        HTML Introduction: HTML stands for HyperText 
        Markup Language. It is used to design web 
        pages using a markup language. HTML is the 
        combination of Hypertext and Markup language. 
        Hypertext defines the link between the web 
        pages. A markup language is used to define 
        the text document within tag which defines 
        the structure of web pages.
    </div>
</body>
  
</html>

Output: 

My Personal Notes arrow_drop_up
Recommended Articles
Page :