截断 Sharepoint Online 列表中的“多行文本”列答案

【问题标题】：Truncate "Multiple lines of text" column in Sharepoint Online list截断 Sharepoint Online 列表中的“多行文本”列
【发布时间】：2020-06-05 01:35:29
【问题描述】：

由于 Microsoft 最近在 Office 365 中对 Sharepoint 列表中的“多行文本”列进行了更改，我现在陷入了一个特定的场景。

我的主要目标是截断此列。如果此列中包含大量字符，则会占用显示页面，因为它最多可以包含 60k 个字符。

我希望将列表页面上此列的行数限制为 5 行，然后尽可能添加“查看更多”按钮？

我发现这篇关于使用 JSON 格式化共享点列表中的列的文章。 https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

我看到您可以使用此脚本将列放入 div，但我只是想知道是否可以使用 JSON 限制此列的行数？

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "txtContent": "@currentField" }

【问题讨论】：

请投票给 100，以便微软可以修复该新功能 sharepoint.uservoice.com/forums/329214-sites-and-collaboration/…
我是提交该建议的人

标签： javascript html json sharepoint sharepoint-online

【解决方案1】：

“是”表示限制为一定数量的文本，但“否”表示“查看更多”按钮，至少在 JSON 格式化的能力范围内。

您可以通过将line-clamp CSS styles 添加到您的 div 来限制使用省略号（“...”）显示的行数。请注意-webkit-line-clamp 的值是您要显示的行数。

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "style": {
          "display": "-webkit-box",
          "-webkit-line-clamp": 3,
          "-webkit-box-orient": "vertical",
          "overflow": "hidden"
   },
   "txtContent": "@currentField"
}

但是，您不能在 JSON 列格式化程序中嵌入 JavaScript，因此如果您想要一个可以切换显示其余文本的“查看更多”按钮，则需要构建一个自定义编码的 SharePoint Framework (SPFx) Field Extension。

【讨论】：

感谢您的意见。我尝试使用上面的代码，但它不起作用，我在“txtContent”之前添加了一个逗号，因为它之前已失效，但在我添加逗号后它已被验证，但它似乎仍然没有截断该列。 :(
另外我注意到它在列的内容上添加了一长行代码：
SharePoint 有它自己的 css 类，它会注入，但只要你的自定义样式 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; 出现，它就会被剪裁到该行数。
另请注意，这些样式不适用于 Internet Explorer (IE)，但适用于 Edge、Chrome 和所有其他“现代”浏览器。
是的，但它没有剪裁它。 :(

【解决方案2】：

SharePoint 列表视图格式仅允许 css 的子集。请注意，没有带有“-webkit-”前缀的样式。请参阅此处的文档 - https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#style

查看格式expressions 应该足够了。您必须确保将多行字段配置为纯文本或富文本但未增强（视图格式尚不支持此功能）。我对多行纯文本字段使用了以下表达式。

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "txtContent": "=substring(@currentField, 0, 140) + '...'" }

【讨论】：

【解决方案3】：

我还被巨大的自定义控件、注入 JS 等卡住了弄清楚对我来说，这可以轻松满足我的需求

"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "style": {
          "display": "-webkit-box",
          "overflow": "auto",
          "max-height":"2em"
   },
   "txtContent": "@currentField"
}

行足够小，价值不会丢失，我可以滚动或全选并粘贴到某处阅读所有

【讨论】：