Skip to content
Related Articles

Related Articles

Tachyons Typography White Space

View Discussion
Improve Article
Save Article
  • Last Updated : 11 Jun, 2022
View Discussion
Improve Article
Save Article

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/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!