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>