Primer CSS truncado – Barcelona Geeks

Primer CSS es un marco CSS que viene con componentes prediseñados y un lenguaje de diseño con espaciado, tipografía y temas que ayudan a construir un sitio web de manera efectiva. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Está creado con el sistema de diseño de GitHub.

Primer CSS truncado se usa para acortar el texto cuando alcanza una longitud mayor a la requerida. En este artículo, veremos Primer CSS Truncate. Para truncar el texto, debe tener la clase Truncate-text y debe ser el hijo directo de la clase Truncate .

Primer CSS Clases truncadas:

Truncar: esta clase es el contenedor principal del componente truncado.
Truncate-text: Esta clase se aplica al texto que se debe truncar cuando no hay suficiente espacio.

Sintaxis:

<span class="Truncate">
    <span class="Truncate-text">...</span>
</span>

Ejemplo 1: Este ejemplo muestra cómo usar las clases mencionadas anteriormente para truncar un texto.

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 - 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</h4>
    </div>
    <div class="d-flex flex-justify-center mt-6">
        <div class="Box">
            <span class="Truncate">
                <span class="Truncate-text p-3" 
                  style="resize: horizontal;
                        overflow: scroll;">
                  This is a really long text with the 
                  <b>Truncate-text </b>class
                </span>
            </span>
        </div>
    </div>
</body>
</html>

Producción:

Ejemplo 2: este ejemplo muestra el uso de la propiedad max-width en Truncate-Text para truncarlo incluso cuando hay suficiente espacio disponible.

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 - 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</h4>
    </div>
    <div class="d-flex flex-justify-center mt-6">
        <div class="Box" 
            style="resize: horizontal;overflow: scroll;
             width: 500px;">
            <span class="Truncate">
                <span class="Truncate-text p-3" 
                    style="max-width: 300px;">
                    This is a really long text
                    with the <b>Truncate-text</b> class
                </span>
            </span>
        </div>
    </div>
</body>
</html>

Producción:

Referencia: https://primer.style/css/components/truncate#truncate

Publicación traducida automáticamente

Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta