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 orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible.
Primer CSS ofrece Truncate, que se usa con texto que alcanza una longitud mayor que el contenedor existente, se acorta con puntos suspensivos. Primer CSS Truncate Custom Max Widths se usa para definir el ancho personalizado de cualquier elemento que tome, incluso si hay suficiente espacio disponible. En este artículo, discutiremos los anchos máximos personalizados de Primer CSS.
Primer CSS Truncate Custom Max Widths Classes:
- Texto truncado: esta clase se utiliza para definir un texto truncado.
- Truncate-text–ampliable: esta clase se usa para expandir el texto truncado al completo cuando se aplica el estado de enfoque o desplazamiento.
Sintaxis:
<div class="Box p-2" style="resize:horizontal;
overflow: scroll;">
<div class="Truncate">
<span class="Truncate-text Truncate-text--expandable"
style="max-width: .....;">
......
</span>
</div>
</div>
Ejemplo 1: El siguiente ejemplo demuestra el uso de Primer CSS Truncate Custom Max Widths usando diferentes anchos máximos en línea mencionados.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Primer CSS Truncate Custom max widths </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Truncate Custom max widths </h3> <div class="Box p-2" style="resize:horizontal; overflow: scroll;"> <div class="Truncate"> <span class="Truncate-text Truncate-text--expandable" style="max-width: 200px;"> GeeksforGeeks, It is a Computer Science portal for all the geeks across the globe </span> </div><br> <div class="Truncate"> <span class="Truncate-text Truncate-text--expandable" style="max-width: 100px;"> GeeksforGeeks, It is a Computer Science portal for all the geeks across the globe </span> </div><br> <div class="Truncate"> <span class="Truncate-text Truncate-text--expandable" style="max-width: 50px;"> GeeksforGeeks, It is a Computer Science portal for all the geeks across the globe </span> </div> </div> </center> </body> </html>
Producción:
Primer CSS Truncar anchos máximos personalizados
Ejemplo 2: a continuación se muestra otro ejemplo que demuestra el uso de Primer CSS Truncate Custom Max Widths utilizando diferentes anchos máximos en línea mencionados.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Primer CSS Truncate Custom max widths </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Truncate Custom max widths </h3> <div class="Box p-2" style="resize:horizontal; overflow: scroll;"> <div class="Truncate"> <span class="Truncate-text Truncate-text--expandable" style="max-width: 200px;"> GeeksforGeeks, It is a Computer Science portal for all the geeks across the globe </span> </div><br> <div class="Truncate"> <span class="Truncate-text Truncate-text--expandable" style="max-width: 100px;"> GeeksforGeeks, It is a Computer Science portal for all the geeks across the globe </span> </div><br> <div class="Truncate"> <span class="Truncate-text Truncate-text--expandable" style="max-width: 50px;"> GeeksforGeeks, It is a Computer Science portal for all the geeks across the globe </span> </div> </div> </center> </body> </html>
Producción:
Primer CSS Truncar anchos máximos personalizados
Referencia: https://primer.style/css/components/truncate#custom-max-widths