自适应卡：如何在不截断文本的情况下创建具有 6 列的表？答案

【问题标题】：Adaptive Card: How to create table with 6 columns without truncating text?自适应卡：如何在不截断文本的情况下创建具有 6 列的表？
【发布时间】：2021-02-05 08:09:11
【问题描述】：

我创建了一张自适应卡片以显示为表格。但是，文本被截断为 Today I... 而不是 Today In Count 完整文本。

此自适应卡适用于 Microsoft Teams。

自适应卡：

{
   "$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
   "type":"AdaptiveCard",
   "version":"1.2",
   "body":[
      {
         "type":"ColumnSet",
         "columns":[
            {
               "type":"Column",
               "items":[
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"Zone",
                     "weight":"bolder"
                  },
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"EAST ZONE",
                     "separator":true
                  }
               ]
            },
            {
               "type":"Column",
               "items":[
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"Today In Counter",
                     "weight":"bolder"
                  },
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"168",
                     "separator":true
                  }
               ]
            },
            {
               "type":"Column",
               "items":[
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"Monthly Count (A)",
                     "weight":"bolder"
                  },
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"5884",
                     "separator":true
                  }
               ]
            },
            {
               "type":"Column",
               "items":[
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"Cancel (B)",
                     "weight":"bolder"
                  },
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"1",
                     "separator":true
                  }
               ]
            },
            {
               "type":"Column",
               "items":[
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"Return (C)",
                     "weight":"bolder"
                  },
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"19",
                     "separator":true
                  }
               ]
            },
            {
               "type":"Column",
               "items":[
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"NET Re Count (A-B-C)",
                     "weight":"bolder"
                  },
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"5864",
                     "separator":true
                  }
               ]
            }
         ]
      }
   ]
}

输出：

如何在所有列中获取完整的文本或如何增加列的宽度？

更新 1：

在设计器中将width: 'stretch' 更改为width: 'auto' 后，即使在选择host app as Microsoft Teams 后也能正常工作。但不适用于实际的团队应用程序。

有什么建议吗？

预期输出：

【问题讨论】：

这能回答你的问题吗？ Is there a way I can give column padding to an adaptive card- Adaptive MS BOT
请在您的问题中编辑自适应卡片 JSON，以便您的布尔值是小写的（true 而不是 True），并且您的所有文本属性都有字符串值（"168" 而不是168 等）。它目前不会在设计器中呈现：adaptivecards.io/designer
@KyleDelaney 我已按照您的建议编辑了 Adaptive Card JSON。你能检查一下并帮忙吗？
@KyleDelaney 你能检查我更新的问题吗？
@KyleDelaney No. ColumnSet 每一行都有wrap:true 解决了我的问题。感谢您的指导。

标签： python botframework microsoft-teams adaptive-cards

【解决方案1】：

虽然您无法像 Manish 所说的那样扩展自适应卡片，但您可以将文本换行，以便每个单元格根据需要变得更高。为了将单元格格式化为整齐的行而不是列，您可以为每一行使用单独的列集，如此答案中所述：Is there a way I can give column padding to an adaptive card- Adaptive MS BOT

【讨论】：

【解决方案2】：

自适应卡片具有有限的固定宽度，并不意味着显示超过 3 列的表格布局（同样受列名称限制）。您可以使用任务模块实现此布局。有关详细信息，请参阅this 文档。

【讨论】：

MS Teams 中的每张卡片都有固定大小，不能超过这个大小。上述场景可以借助 MS Teams 中的任务模块来实现。