Forum Discussion
Wrapping text in gallery view of list is breaking in the middle of words
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 wr...
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 |
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:
- You'll want to modify style with the following:
"style": {
"white-space": "wrap",
"word-break": "keep-all"
}
