最近项目上遇到一个需求是地图上的 popup 弹窗里需要做个分页表格，所以这里只能用原生 html js 来实现，又因为 popup 宽度非常有限，所以过长的 cell 需要用…隐藏，鼠标悬浮展示完整内容，纯 html + css 即可实现

<table class='moreTable'>
  <tr>
    <td class='tableCell' title='内容内容内容内容内容内容内容内容'>内容内容内容内容内容内容内容内容</td>
    <td class='tableCell' titel='内容内容内容内容内容内容内容内容内容内容内容'>内容内容内容内容内容内容内容内容内容内容内容</td>
  </tr>
  <tr>
    <td class='tableCell' title='内容内容内容内容内容内容'>内容内容内容内容内容内容</td>
    <td class='tableCell' title='内容内容内容内容内容内容内容内容'>内容内容内容内容内容内容内容内容</td>
  </tr>
</table>

👆 title 可以保证鼠标悬浮展示内容，可以通过遍历 table tr td 加上这个属性，必须保证 title 文字和内容区相同

.moreTable{
  table-layout: fixed;
  word-break: break-all;
  width: 300px;
}
.tableCell{
  overflow: hidden; // 超出区域隐藏
  text-overflow: ellipsis;  // 文本超出区域...展示
  white-space: nowrap;  // 不换行
}

end…