Text truncation

React Bootstrap 5 Text truncation component

Truncate long strings of text with an ellipsis.

Basic example

For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi. 
import React from 'react';
import { MDBRow, MDBCol } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <>
      <MDBRow>
        <MDBCol size="2" className="text-truncate">
          Praeterea iter est quasdam res quas ex communi.
        </MDBCol>
      </MDBRow>

      <span className="d-inline-block text-truncate" style={{maxWidth: 150}}>
        Praeterea iter est quasdam res quas ex communi.
      </span>
    </>
  );
}