Text truncation

Truncate long strings of text with an ellipsis.

On this page

For longer content, you can add a text-truncate attribute 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.
vue
<template>
  <Row>
    <Col
      col="2"
      text-truncate
    >
      This text is quite long, and will be truncated once displayed.
    </Col>
  </Row>
  <b-span
    display="inline-block"
    text-truncate
    style="max-width: 150px"
  >
    This text is quite long, and will be truncated once displayed.
  </b-span>
</template>