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...
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"
}
"style": {
"white-space": "wrap",
"word-break": "keep-all"
}