Tachyons Typography White Space
Tachyons is a CSS toolkit that is used to create a responsive website. In this article, we will learn how we can provide white space on a web page using the CSS toolkit named Tachyons.
Tachyons Typography White Space is used to control how whitespace is rendered.
Tachyons Typography White Space Classes:
- ws-normal: This class is used to suppress white space characters and break lines based on the width of the element or the placement of a <br> tag.
- nowrap: This class is used to keep all text on one line – often used in conjunction with truncation or a scrollbar. This may be beneficial for showing Unix style commands wherein indicating everything is on one line is essential for clarity.
- pre: This class is used to preserve all whitespace and linebreaks and this is useful for displaying code or poetry. Simulates the rendering of the <pre> tag.
Syntax:
<element-name class=" "> ... </element-name>
Example 1: In the below code, we will make use of the “ws-normal” class.
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = </ head > < body > < center > < h1 class = "green" > GeeksforGeeks </ h1 > < h3 > Programming Language </ h3 > < p class = "ws-normal" > Programming Language is indeed the fundamental unit of today’s tech world. It is considered as the set of commands and instructions that we give to the machines to perform a particular task. For example, if you give some set of instructions to add two numbers then the machine will do it for you and tell you the correct answer accordingly. But do you know that Programming Languages are having a long and rich history of their evolution? And with a similar concern, here in this article, we’ll take a look at the evolution of Programming Languages over the period. </ p > </ center > </ body > </ html > |
Output:

Example 2: In the below code, we will make use of the “nowrap” class.
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = </ head > < body > < center > < h1 class = "green" > GeeksforGeeks </ h1 > < p class = "nowrap" > Programming Language is indeed the fundamental unit of today’s tech world. It is considered as the set of commands and instructions that we give to the machines to perform a particular task. For example, if you give some set of instructions to add two numbers then the machine will do it for you and tell you the correct answer accordingly. But do you know that Programming Languages are having a long and rich history of their evolution? And with a similar concern, here in this article, we’ll take a look at the evolution of Programming Languages over the period. </ p > </ center > </ body > </ html > |
Output:

Reference: https://tachyons.io/docs/typography/white-space/
Please Login to comment...