Break text into new line with bootstrap table td

You can use the word-wrap or word-break CSS property to break the text into a new line within a Bootstrap table td element. Here are a few examples:

Method 1: Using word-wrap

<table class="table">
  <tbody>
    <tr>
      <td style="word-wrap: break-word;">This is a long piece of text that needs to be broken into a new line.</td>
    </tr>
  </tbody>
</table>

Method 2: Using word-break

<table class="table">
  <tbody>
    <tr>
      <td style="word-break: break-all;">This is a long piece of text that needs to be broken into a new line.</td>
    </tr>
  </tbody>
</table>

Method 3: Using white-space

<table class="table">
  <tbody>
    <tr>
      <td style="white-space: pre-line;">This is a long piece of text that needs to be broken into a new line.</td>
    </tr>
  </tbody>
</table>

Method 4: Using Bootstrap's built-in text-wrap class

<table class="table">
  <tbody>
    <tr>
      <td class="text-wrap">This is a long piece of text that needs to be broken into a new line.</td>
    </tr>
  </tbody>
</table>

Note that the text-wrap class is only available in Bootstrap 4 and later versions.

You can also use the max-width property to set a maximum width for the td element, and then use the word-wrap or word-break property to break the text into a new line when it reaches that width.

<table class="table">
  <tbody>
    <tr>
      <td style="max-width: 200px; word-wrap: break-word;">This is a long piece of text that needs to be broken into a new line.</td>
    </tr>
  </tbody>
</table>