Forum Discussion

Matthew Carter's avatar
Matthew Carter
Iron Contributor
Jan 24, 2023

Where do I add style word-break keep-all in Microsoft Lists for JSON

Sorry I am having trouble figuring out where to add some JSON for word wrap.

 

I don't know where to add style word-break keep all

 

 

I have a Microsoft Lists that I'd like to have the words wrap in Gallery mode.

For the top line, no need, no problem, the next line, some could use some word wrap.

If I make ALL of them 1024 it will be a "list" instead of this gallery.

I found online that people use style work break keep all.  I am not sure where to put it.  I tried to just ADD it in the code and it is obviously NOT working when I do preview.

 

This is the start of the JSON

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 135,
  "width": 254,
   "style": {
    "word-break": "keep-all"
  },
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "button",
        "attributes": {
          "class": "sp-card-defaultClickButton",
          "role": "presentation"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Title.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                  "role": "heading",
                  "aria-level": "3"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Guests.DisplayName]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-content sp-card-formatterRef"
                },
                "children": [
                  {
                    "columnFormatterReference": "[$Guests]"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

 

  • Gfox77's avatar
    Gfox77
    Copper Contributor

    Matthew Carter

    Hi Matt, not sure if you figured this out but I just did.

     

    Remove the below class in your JSON

    sp-card-label

     

    So for example for the Name (display name of a document library)

     

    "children": [
    {
    "elmType": "p",
    "attributes": {
    "class": "ms-fontColor-neutralSecondary sp-card-label"
    },
    "txtContent": "[!FriendlyTitle.DisplayName]"
    },
     
    and you will find it stops forcing the text wrap.
     
    Note if you're using a custom line of text field it is  - sp-card-content

Resources