ReactJS MDBootstrap Utilidades de truncamiento de texto

MDBootstrap es una biblioteca de interfaz de usuario de reacción basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar las utilidades de truncamiento de texto en ReactJS MDBootstrap. Las utilidades de truncamiento de texto se utilizan para usar puntos suspensivos para dividir grandes secuencias de texto.

Sintaxis:

<span class="text-truncation">Text</span>

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

cd foldername

Paso 3: Instale ReactJS MDBootstrap en su directorio dado.

npm i mdb-ui-kit
npm i mdb-react-ui-kit

Estructura del proyecto : Se verá como lo siguiente.

Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.

npm start

Ejemplo 1: este es el ejemplo básico que muestra cómo usar las utilidades de truncamiento de texto.

import React from "react";
import { MDBRow, MDBCol } from "mdb-react-ui-kit";
  
export default function App() {
  
    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Text Truncate</h4>
  
            <MDBRow>
                <MDBCol size="3" className="text-truncation">
                    MDBootstrap is a Material Design 
                    and bootstrap-based react UI
                    brary that is used to make good 
                    looking webpages with its
                    seamless and easy-to-use component.
                </MDBCol>
            </MDBRow>
        </div>
    );
}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo agregar tarjetas en Utilidades de enlace extendido.

import React from "react";
import { MDBRow, MDBCol } from "mdb-react-ui-kit";
  
export default function App() {
  
    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Text Truncate</h4>
  
            <MDBRow>
                <MDBCol className="d-inline-block text-truncate" 
                style={{ maxWidth: 500 }}>
                    MDBootstrap is a Material Design 
                    and bootstrap-based react UI
                    brary that is used to make good 
                    looking webpages with its
                    seamless and easy-to-use component.
                </MDBCol>
            </MDBRow>
        </div>
    );
}

Producción:

Referencia: https://mdbootstrap.com/docs/b5/react/utilities/text-truncation/