Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas como en forma de clase. Es la alternativa a la propiedad CSS Line Height . Esta clase se utiliza para establecer la cantidad de espacio utilizado para las líneas, como en el texto. No se permiten valores negativos.
Clases de altura de línea:
- Lead -3: esta clase establece la altura de la línea en 0,75 rem.
- Lead -4: esta clase establece la altura de la línea en 1rem.
- Lead -5: esta clase establece la altura de la línea en 1,25 rem.
- 6 principales: esta clase establece la altura de la línea en 1,5 rem.
- lead -7: esta clase establece la altura de la línea en 1,75 rem.
- Lead -8: esta clase establece la altura de la línea en 2rem.
- Lead -9: esta clase establece la altura de la línea en 2,25 rem.
- 10 principales: esta clase establece la altura de la línea en 2,5 rem.
- lead-none: esta clase establece la altura de línea en 1.
- lead-tight: esta clase establece la altura de la línea en 1,25.
- lead-snug: esta clase establece la altura de la línea en 1,375.
- lead-normal: esta clase establece la altura de línea en 1,5.
- lead-relaxed: esta clase establece la altura de línea en 1.625.
- lead-loose: esta clase establece la altura de la línea en 2.
Sintaxis:
<element class="leading-{height}">...</element>
Ejemplo: En este ejemplo, usaremos tres clases lead-none, lead-normal y lead-loose . Puede cambiar el nombre de la clase según sus necesidades.
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Line Height Class</b> <div class="mx-24 bg-green-200 text-justify"> <p class="p-2">leading-none:<br> <span class="leading-none"> How many times were you frustrated while looking out for a good collection of programming/algorithm /interview questions? What did you expect and what did you get? GeeksforGeeks. </span> </p> <p class="p-2">leading-normal:<br> <span class="leading-normal"> How many times were you frustrated while looking out for a good collection of programming/algorithm /interview questions? What did you expect and what did you get? GeeksforGeeks. </span> </p> <p class="p-2">leading-loose:<br> <span class="leading-loose"> How many times were you frustrated while looking out for a good collection of programming/algorithm /interview questions? What did you expect and what did you get? GeeksforGeeks. </span> </p> </div> </body> </html>
Producción:
Clases de altura de línea
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA