表格单元格内HTML文本单行截断并显示省略号实现咨询

嘿，这个需求用纯CSS就能搞定，不用折腾JavaScript，我给你两种方案，你可以根据实际需求选：

方案一：合并所有文本为一行后截断 #

如果希望把单元格内的所有文本都放在一行，超出宽度后显示省略号，可以这么做：

首先先修正你HTML里的小错误——最后多了一个多余的</p>标签，正确的HTML代码是：

<table>
  <tr>
    <td>
      <p>Something is great</p>
      <p>Something else is great</p>
      <p>And finally everything is great</p>
    </td>
  </tr>
</table>

然后添加CSS样式：

/* 设置单元格的固定宽度，触发溢出 */
td {
  width: 80px;
  white-space: nowrap; /* 强制所有内容不换行 */
  overflow: hidden; /* 隐藏超出宽度的内容 */
  text-overflow: ellipsis; /* 显示省略号标识溢出 */
}

/* 把p标签改成行内元素，让多个p的内容在同一行显示 */
td p {
  display: inline;
  margin: 0; /* 去掉p的默认上下边距，避免意外换行 */
}

这样设置后，所有段落的文本会连成一行，超出单元格宽度的部分就会被隐藏，同时末尾显示省略号，比如宽度足够小的话就会显示Something...。

方案二：仅显示第一个段落并截断 #

如果只需要保留第一个段落的内容，超出后显示省略号，其他段落直接隐藏，可以用这个方案：

HTML还是用修正后的版本，CSS改成：

td {
  width: 80px;
  overflow: hidden;
}

/* 隐藏除第一个段落外的所有内容 */
td p:not(:first-child) {
  display: none;
}

/* 对第一个段落设置截断样式 */
td p:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

这个方案会只显示第一个<p>里的内容，超出宽度后同样显示省略号，完全符合你说的Something...的效果。

两种方案都不需要额外的JS，纯CSS就能实现，兼容性也很好，主流浏览器都支持text-overflow属性哦~

内容的提问来源于stack exchange，提问作者Barry