Wrapping text in gallery view of list is breaking in the middle of words

[Beth_Culpepper]

Hi everyone!

I am trying to learn/understand JSON and have been doing a lot of self-teaching but I'm stuck on one thing.

I have my code for a Gallery view and the two fields that have text wrapping issues are $Nicknames and $FunFact.  I can see all of the text that inputs but when viewed on the tile, it is adding a break into the middle of words and not wrapping correctly.  I don't know anything about CSS or how to access it but I did try to learn from another article posted here about a year ago and couldn't figure it out.  So I'm here for help. 

Here's my code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 500,
  "width": 254,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "sp-card-defaultClickButton"
        },
        "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": "img",
                "attributes": {
                  "src": "[$ImageURL]",
                  "title": "My Pet!"
                },
                "style": {
                  "width": "100%",
                  "height": "200px"
                }
              },
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                },
                "txtContent": "='Hi, my name is: ' + [$Title]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$PetAge]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                  "role": "heading",
                  "aria-level": "3"
                },
                "txtContent": "=if ([$PetAge] == '', '–', 'I am: ' + [$PetAge] + ' years old')"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer",
              "style": {
                "height": "auto"
              }
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                },
                "txtContent": "='My nicknames: '+ [$Nicknames]",
                "style": {
                  "white-space": "normal"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer",
              "style": {
                "height": "auto"
              }
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                  "style": {
                    "white-space": "pre-wrap",
                    "max-height": "80px"
                  }
                },
                "txtContent": "='Fun fact about me: '+ [$FunFact]",
                "style": {
                  "white-space": "normal"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                },
                "txtContent": " "
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-label sp-card-highlightedContent"
                },
                "txtContent": "= 'My NCMer is: ' + [$SubmitterDisplayName]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-label sp-card-highlightedContent"
                },
                "txtContent": "= 'My NCMer works in: ' + [$NCMOffice]"
              }
            ]
          }
        ]
      }
    ]
  }
}

And here's what it's doing:

No doubt this is something simple to change in the JSON code but I'm lost.  Any help is appreciated!  THANK YOU!! :)

[#2]

@Beth_Culpepper 

To fix the text wrapping issues in the `$Nicknames` and `$FunFact` fields in your SharePoint Online list view, you can make the following modifications to your JSON formatting code:

For the `$Nicknames` field, add the `style` property to the wrapping `div` element and set the `white-space` CSS property to `"normal"`:

{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
"style": {
"white-space": "normal"
}
},
"txtContent": "='My nicknames: '+ [$Nicknames]"
}

For the `$FunFact` field, also add the `style` property to the wrapping `div` element, but this time set the `white-space` property to `"pre-wrap"` and provide a `max-height` value to limit the height:

{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
"style": {
"white-space": "pre-wrap",
"max-height": "80px"
}
},
"txtContent": "='Fun fact about me: '+ [$FunFact]"
}

These modifications will ensure that the text in the `$Nicknames` and `$FunFact` fields wraps correctly and does not break in the middle of words.

Here's the modified JSON code with the fixes for text wrapping issues in the `$Nicknames` and `$FunFact` fields:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"height": 500,
"width": 254,
"hideSelection": false,
"fillHorizontally": true,
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-container"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-defaultClickButton"
},
"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": "img",
"attributes": {
"src": "[$ImageURL]",
"title": "My Pet!"
},
"style": {
"width": "100%",
"height": "200px"
}
},
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
},
"txtContent": "='Hi, my name is: ' + [$Title]"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"title": "[$PetAge]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
"role": "heading",
"aria-level": "3"
},
"txtContent": "=if ([$PetAge] == '', '–', 'I am: ' + [$PetAge] + ' years old')"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer",
"style": {
"height": "auto"
}
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
"style": {
"white-space": "normal"
}
},
"txtContent": "='My nicknames: '+ [$Nicknames]"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer",
"style": {
"height": "auto"
}
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
"style": {
"white-space": "pre-wrap",
"max-height": "80px"
}
},
"txtContent": "='Fun fact about me: '+ [$FunFact]"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer",
              "children": [
                {
                  "elmType": "p",
                  "attributes": {
                    "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                  },
                  "txtContent": " "
                }
              ]
            },
            {
              "elmType": "div",
              "attributes": {
                "class": "sp-card-displayColumnContainer"
              },
              "children": [
                {
                  "elmType": "p",
                  "attributes": {
                    "class": "ms-fontColor-neutralPrimary sp-card-label sp-card-highlightedContent"
                  },
                  "txtContent": "= 'My NCMer is: ' + [$SubmitterDisplayName]"
                }
              ]
            },
            {
              "elmType": "div",
              "attributes": {
                "class": "sp-card-displayColumnContainer"
              },
              "children": [
                {
                  "elmType": "p",
                  "attributes": {
                    "class": "ms-fontColor-neutralPrimary sp-card-label sp-card-highlightedContent"
                  },
                  "txtContent": "= 'My NCMer works in: ' + [$NCMOffice]"
                }
              ]
            }
          ]
        }
      }
    ]
  }
}

Please note that the code assumes you have already defined the necessary column references and other properties specific to your list. Make sure to update the code with your actual column names and any additional formatting requirements as needed.

Feel free to adjust the styles and properties based on your specific design preferences.

If I have answered your question, please mark your post as Solved

If you like my response, please give it a like

[#3]

@Deleted 

Hi and thank you! When I modify my JSON code based on your suggestion, it adds an ellipses and doesn't show the words anymore:

My code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 500,
  "width": 254,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "sp-card-defaultClickButton"
        },
        "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": "img",
                "attributes": {
                  "src": "[$ImageURL]",
                  "title": "My Pet!"
                },
                "style": {
                  "width": "100%",
                  "height": "200px"
                }
              },
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                },
                "txtContent": "='Hi, my name is: ' + [$Title]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer",
              "style": {
                  "height": "auto"
              }
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "title": "[$PetAge]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                  "role": "heading",
                  "aria-level": "3"
                },
                "txtContent": "=if ([$PetAge] == '', '–', 'I am: ' + [$PetAge] + ' years old')",
                "style": {
                  "white-space": "normal"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer",
              "style": {
                "height": "auto"
              }
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                  "style": {
                    "white-space": "normal"
                  }
                },
                "txtContent": "='My nicknames: '+ [$Nicknames]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer",
              "style": {
                "height": "auto"
              }
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                  "style": {
                    "white-space": "pre-wrap",
                    "max-height": "80px"
                  }
                },
                "txtContent": "='Fun fact about me: '+ [$FunFact]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                },
                "txtContent": " "
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-label sp-card-highlightedContent"
                },
                "txtContent": "= 'My NCMer is: ' + [$SubmitterDisplayName]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary sp-card-label sp-card-highlightedContent"
                },
                "txtContent": "= 'My NCMer works in: ' + [$NCMOffice]"
              }
            ]
          }
        ]
      }
    ]
  }
}

My results:

[#4]

You'll want to modify style with the following:
"style": {
"white-space": "wrap",
"word-break": "keep-all"
}