HTML表格如何实现单元格内容的换行？有哪些方法？

<style>
  table {
    width: 100%;
    table-layout: fixed; /* 这一行很重要，能让列宽更可控 */
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    word-wrap: break-word; /* 兼容旧浏览器，等同于 overflow-wrap */
    overflow-wrap: break-word; /* 推荐 */
  }
  .long-text-break-all {
    word-break: break-all;
  }
</style>

<table>
  <thead>
    <tr>
      <th>正常文本</th>
      <th>长单词自动换行</th>
      <th>强制任何字符处换行</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>这是一段正常的文本，它会根据单元格宽度自动换行。</td>
      <td>ThisIsAVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongWordThatShouldBreakInsideTheCell</td>
      <td class="long-text-break-all">ThisIsAVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongWordThatShouldBreakInsideTheCell</td>
    </tr>
    <tr>
      <td>再来一行短的</td>
      <td>http://www.example.com/very/very/very/very/very/long/url/that/might/not/fit/in/a/small/cell/without/breaking.html</td>
      <td class="long-text-break-all">http://www.example.com/very/very/very/very/very/long/url/that/might/not/fit/in/a/small/cell/without/breaking.html</td>
    </tr>
  </tbody>
</table>

<style>
  table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }
  .col-id {
    width: 100px; /* 给这列一个明确的宽度 */
    overflow-wrap: break-word;
  }
  .col-description {
    width: 200px;
    overflow-wrap: break-word;
  }
  .col-code {
    width: 150px;
    word-break: break-all; /* 代码或ID可能需要这种强制换行 */
  }
</style>

<table>
  <thead>
    <tr>
      <th class="col-id">ID</th>
      <th class="col-description">描述</th>
      <th class="col-code">代码片段</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col-id">A1B2C3D4E5F6G7H8I9J0K1L2M3N4O5P6Q7R8S9T0U1V2W3X4Y5Z6</td>
      <td class="col-description">这是一段描述信息，内容可能比较长，需要自动换行以适应单元格宽度。</td>
      <td class="col-code">const_very_long_variable_name_that_should_break_anywhere_to_fit = 'value';</td>
    </tr>
    <tr>
      <td class="col-id">ANOTHERVERYLONGIDEXAMPLE</td>
      <td class="col-description">这里是另一段描述，它也可能很长，确保它不会溢出。</td>
      <td class="col-code">function_another_long_function_name_example_to_show_break_all() { /* ... */ }</td>
    </tr>
  </tbody>
</table>

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }
</style>

<table>
  <thead>
    <tr>
      <th>产品信息</th>
      <th>地址</th>
      <th>诗歌节选</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        产品名称：智能手表X<br>
        型号：SW-2023<br>
        价格：$199.99
      </td>
      <td>
        北京市<br>
        朝阳区建国路88号<br>
        SOHO现代城B座10层
      </td>
      <td>
        面朝大海，春暖花开<br>
        从明天起，做一个幸福的人<br>
        喂马、劈柴，周游世界
      </td>
    </tr>
    <tr>
      <td>
        服务热线：<br>
        400-123-4567<br>
        (工作日 9:00-18:00)
      </td>
      <td>
        上海市<br>
        浦东新区陆家嘴环路1000号<br>
        恒生银行大厦20层
      </td>
      <td>
        陌生人，我也为你祝福<br>
        愿你有一个灿烂的前程<br>
        愿你有情人终成眷属
      </td>
    </tr>
  </tbody>
</table>