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.
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>