テキストトランケーション

長い文字列のテキストを省略記号で切り捨てます。

長い内容の場合は、text-truncate 属性を追加して、テキストを省略記号で切り詰めることができます。 display: inline-block または 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>

See Also