word-break:keep-all应用案例实例页面

展示

代码

• HTML：

  <h4>排版优化</h4>
  <table class="keep-all">
      <thead>
          <tr>
              <th>会议时间</th>
              <th>会议地点</th>
              <th>会议人员(3)</th>
              <th>会议内容</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2021年2月28日</td>
              <td>6号楼3楼伏羲会议室</td>
              <td class="keep-all">张三 李四 王二麻子</td>
              <td>讨论字符单元的中断与换行，以及如何组织内容让表达效果最好</td>
          </tr>
      </tbody>
  </table>

• CSS：

  .keep-all th,
  td.keep-all {
      word-break: keep-all;
  }