Tachyons es un conjunto de herramientas de CSS que se utiliza para crear un sitio web receptivo. En este artículo, aprenderemos cómo podemos proporcionar espacios en blanco en una página web utilizando el conjunto de herramientas de CSS llamado Tachyons.
Tachyons Typography White Space se utiliza para controlar cómo se representan los espacios en blanco.
Taquiones Tipografía Clases de espacio en blanco:
- ws-normal: esta clase se usa para suprimir los espacios en blanco y las líneas de división según el ancho del elemento o la ubicación de una etiqueta <br>.
- nowrap: esta clase se usa para mantener todo el texto en una sola línea, a menudo se usa junto con el truncamiento o una barra de desplazamiento. Esto puede ser beneficioso para mostrar comandos de estilo Unix en los que indicar que todo está en una línea es esencial para la claridad.
- pre: esta clase se usa para conservar todos los espacios en blanco y los saltos de línea y es útil para mostrar código o poesía. Simula la representación de la etiqueta <pre>.
Sintaxis:
<element-name class=" ">
...
</element-name>
Ejemplo 1: En el siguiente código, haremos uso de la clase » ws-normal «.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/> </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>
Producción:
Ejemplo 2: En el siguiente código, haremos uso de la clase » nowrap» .
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/> </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>
Producción:
Referencia: https://tachyons.io/docs/typography/white-space/