text-nowrap

bootstrap5.css

bootstrap5.css
.text-nowrap {
  white-space: nowrap !important;
}

html bootstrap5 Sample

テキストの折り返し許可、不許可:text-wrapとtext-nowrap


テキスト折り返し許可している場合
テキスト折り返し許可していない場合
  <!-- 設定した文字数で折り返して全部を表示する -->
  <div class="badge bg-primary text-wrap" style="width: 6rem">テキスト折り返し許可している場合</div>
  <!-- divからはみ出してテキストが表示される -->
  <div class="text-nowrap bd-highlight" style="width: 6rem">テキスト折り返し許可していない場合</div>

テキストが折り返さないように設定する:text-nowrap


途中で折り返しなしはtext-nowrapを追加 途中で折り返しても良い場合は何もなし
  <table class="w-50 mx-auto">
    <tr>
      <th class="text-nowrap">途中で折り返しなしはtext-nowrapを追加</th>
      <td>途中で折り返しても良い場合は何もなし</td>
    </tr>
  </table>