Text truncation

Vue Bootstrap 5 Text truncation

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.

This text is quite long, and will be truncated once displayed.
This text is quite long, and will be truncated once displayed. 
<template>
  <!-- Block level -->
  <MDBRow>
    <MDBCol col="2" class="text-truncate">
      Praeterea iter est quasdam res quas ex communi.
    </MDBCol>
  </MDBRow>
  <!-- Inline level -->
  <span class="d-inline-block text-truncate" style="max-width: 150px">
    Praeterea iter est quasdam res quas ex communi.
  </span>
</template>
<script>
  import { MDBRow, MDBCol } from 'mdb-vue-ui-kit';

  export default {
    components: {
      MDBRow,
      MDBCol,
    },
  };
</script>
<script setup lang="ts">
  import { MDBRow, MDBCol } from 'mdb-vue-ui-kit';
</script>