Forum Discussion
Matthew Carter
Jan 24, 2023Iron Contributor
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]"
}
]
}
]
}
]
}
]
}
}
- Gfox77Copper Contributor
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-neutralSecondarysp-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