Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

Sometimes we want to display the text on 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: 

  • white-space: It helps to set how the white space and line breaks inside the element’s text are handled.
  • 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.

Example: Here is the implementation of the above-explained method.

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: 


Last Updated : 22 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads