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 Expand on Hover o Focus se usa para expandir el texto cuando se les aplica el estado de desplazamiento o enfoque. En este artículo, discutiremos Truncar Expandir en Hover o Focus.
Primer CSS Truncate Expand on Hover o Focus 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-5" style="resize: horizontal;
overflow: scroll;">
<span class="Truncate">
<a href="#" class="Truncate-text
Truncate-text--expandable">
......
</a>
</span>
</div>
Ejemplo 1: a continuación se muestra el ejemplo que demuestra el uso de Primer CSS Truncate Expand on Hover o Focus usando texto dentro de la etiqueta para .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Primer CSS Truncate Expand on Hover or Focus </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 Expand on Hover or Focus </h3> <div class="Box p-5" style="resize: horizontal; overflow: scroll; width: 800px;"> <span class="Truncate"> <p href="#" class="Truncate-text Truncate-text--expandable"> GeeksforGeeks is a Computer Science Portal </p> <p href="#" class="Truncate-text Truncate-text--expandable"> GeeksforGeeks is a Computer Science Portal </p> <p href="#" class="Truncate-text Truncate-text--expandable"> GeeksforGeeks is a Computer Science Portal </p> </span> </div> </center> </body> </html>
Producción:
Primer CSS Truncar Expandir al pasar el mouse o enfocar
Ejemplo 2: a continuación se muestra el ejemplo que demuestra el uso de Primer CSS Truncate Expand on Hover o Focus usando texto dentro de la etiqueta de anclaje .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Primer CSS Truncate Expand on Hover or Focus </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 Expand on Hover or Focus </h3> <div class="Box p-5" style="resize: horizontal; overflow: scroll; width: 800px;"> <span class="Truncate"> <a href="#" class="Truncate-text Truncate-text--expandable"> GeeksforGeeks is a Computer Science Portal </a> <a href="#" class="Truncate-text Truncate-text--expandable"> GeeksforGeeks is a Computer Science Portal </a> <a href="#" class="Truncate-text Truncate-text--expandable"> GeeksforGeeks is a Computer Science Portal </a> </span> </div> </center> </body> </html>
Producción:
Primer CSS Truncar Expandir al pasar el mouse o enfocar
Referencia: https://primer.style/css/components/truncate