Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientados a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
En este artículo, veremos Primer CSS Truncate Multiple Items . Los elementos de texto truncado se pueden agregar en la misma fila y, cuando no haya suficiente espacio disponible, se truncarán uniformemente. Sin embargo, si desea que un elemento no se trunque primero, se puede usar Truncate-text–primary . Puede haber varios elementos con la clase Truncate-text–primary añadida.
Primer CSS Truncar clases de elementos múltiples:
- Truncate-text: Esta clase se utiliza sobre el texto que queremos truncar. Debe ser un hijo directo de la clase Truncate .
- Truncate-text–primary: esta clase se usa en un elemento que no debe truncarse primero.
Sintaxis:
<span class="Truncate">
<span class="Truncate-text">
...
</span>
<span class="Truncate-text">
...
</span>
</span>
Ejemplo 1: este ejemplo ilustra cómo se truncan varios elementos.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Truncate Multiple Items - Primer CSS </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@19.8.2/dist/primer.css" /> </head> <body> <div class="text-center"> <h2 style="color: green;"> GeeksforGeeks </h2> <h4> Primer CSS - Truncate Multiple Items </h4> </div> <div class="d-flex flex-justify-center mt-6"> <div class="Box" style="resize: horizontal; overflow: scroll;"> <span class="Truncate"> <span class="Truncate-text p-2" > Learn Data Structures </span> <span class="Truncate-text p-2" > Learn Basic Algorithms </span> <span class="Truncate-text p-2" > Start Solving Questions </span> </span> </div> </div> </body> </html>
Producción:
Primer CSS Truncar varios elementos
Ejemplo 2: Este ejemplo ilustra el uso de la clase Truncate-text–primary para evitar que un texto se trunque primero. Aquí el elemento con Truncate-text–primary class se muestra en negrita.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Truncate Multiple Items - Primer CSS </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@19.8.2/dist/primer.css" /> </head> <body> <div class="text-center"> <h2 style="color: green;"> GeeksforGeeks </h2> <h4> Primer CSS - Truncate Multiple Items </h4> </div> <div class="d-flex flex-justify-center mt-6"> <div class="Box" style="resize: horizontal;overflow: scroll;"> <span class="Truncate"> <span class="Truncate-text p-2 Truncate-text--primary"> <b>Learn Data Structures</b> </span> <span class="Truncate-text p-2" > Learn Basic Algorithms </span> <span class="Truncate-text p-2" > Start Solving Questions </span> </span> </div> </div> </body> </html>
Producción:
Primer CSS Truncar varios elementos
Referencia: https://primer.style/css/components/truncate#truncate-multiple-items
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA