SharePoint列表表单自定义：解决内容溢出与截断问题

红色标记区域（表单字段内容溢出） #

方案1：JSON字段格式化实现自适应/截断 #

如果是SharePoint新式表单，可针对目标证书字段添加自定义JSON格式化，两种效果任选：

• 自适应高度（内容换行）：让容器自动扩展高度容纳多行内容

{
  "elmType": "div",
  "style": {
    "height": "auto",
    "min-height": "40px",
    "white-space": "pre-wrap",
    "word-wrap": "break-word"
  },
  "txtContent": "@currentField"
}

• 单行截断（末尾省略号）：限制内容单行显示，溢出部分用省略号替代

{
  "elmType": "div",
  "style": {
    "height": "40px",
    "white-space": "nowrap",
    "overflow": "hidden",
    "text-overflow": "ellipsis"
  },
  "txtContent": "@currentField"
}

方案2：注入自定义CSS #

若JSON配置无法满足，可通过自定义CSS全局调整表单字段容器：

/* 自适应高度 */
.ms-formfield-container {
  height: auto !important;
  min-height: 50px;
}

/* 多行内容换行 */
.ms-formfield-value {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* 单行截断 */
.ms-formfield-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

蓝色标记区域（过长选项截断） #

方案1：选项字段JSON格式化 #

针对下拉、多选等选项类字段，修改其显示样式实现列边缘截断：

{
  "elmType": "div",
  "style": {
    "width": "100%",
    "white-space": "nowrap",
    "overflow": "hidden",
    "text-overflow": "ellipsis"
  },
  "txtContent": "@currentField"
}

方案2：全局CSS调整列宽度 #

如果是表单网格布局中的选项列，通过CSS限制宽度并截断：

.ms-listview-grid-cell {
  max-width: 220px; /* 按需设置最大宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

进阶替代方案 #

若默认表单JSON配置能力不足，可考虑：

• Power Apps自定义表单：完全可视化自定义布局，针对大量证书字段可设计为折叠面板、列表等形式，灵活控制显示逻辑。
• SPFx表单扩展：基于SharePoint Framework开发自定义表单组件，实现高度定制的样式和交互。

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