text-truncate

bootstrap5.css

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html bootstrap5 Sample

長いテキストを省略記号：text-truncate w-25

２５文字以上は省略されます。２５文字以上は省略されます。２５文字以上は省略されます。２５文字以上は省略されます。

  <p class="text-truncate w-25">２５文字以上は省略されます。２５文字以上は省略されます。２５文字以上は省略されます。２５文字以上は省略されます。</p>

定義リスト：dlとdtとdd

dt1

用語1の説明。

長いテキストは切り捨てて省略

用語2の説明。

用語3

ネストされた用語4: ネストされた用語4の説明

  <!-- rowをcolで制御する -->
  <dl class="row">
    <dt class="col-sm-3">dt1</dt>
    <dd class="col-sm-9">用語1の説明。</dd>
    <!-- text-truncateがcolの幅で自動設定される -->
    <dt class="col-sm-3 text-truncate">長いテキストは切り捨てて省略</dt>
    <dd class="col-sm-9">用語2の説明。</dd>
    <dt class="col-sm-3">用語3</dt>
    <dd class="col-sm-9">
      <dl class="row">
        <dt class="col-sm-4">ネストされた用語4</dt>
        <dd class="col-sm-8">ネストされた用語4の説明</dd>
      </dl>
    </dd>
  </dl>