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>
<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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!