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/