Word wrap in Row formatting SharePoint online
-
19-02-2021 - |
Question
Is there any way we can add a word wrap for the text which goes beyond the tile size?
Please see the code used in Formatting the Rows:
{
"height": 135,
"width": 400,
"hideSelection": false,
"fillHorizontally": true,
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-container"
},
"children": [
{
"elmType": "button",
"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": "p",
"attributes": {
"title": "[$Team]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
},
"txtContent": "=if ([$Team] == '', '–', [$Team])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"style": {
"background-color": "=if([$Score] < 25, '#02ad54', if([$Score] > 26 && [$Score] < 32, '#92d051', if([$Score] > 33 && [$Score] < 45, '#c1d799', if([$Score] > 46 && [$Score] < 55, '#d7e3bd',if([$Score] > 56 && [$Score] < 75, '#ffc000', if([$Score] > 75, '#fe0000', '' ))))"
},
"attributes": {
"title": "=if ([$Score.displayValue] == '', '–', [$Score.displayValue])",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent "
},
"txtContent": "=if ([$Score.displayValue] == '', '–', [$Score.displayValue])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"title": "[$Details]",
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"txtContent": "=if ([$Details] == '', '–', [$Details])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-lastTextColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"title": "[$Status]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent "
},
"txtContent": "=if ([$Status] == '', '–', [$Status])"
}
]
}
]
}
]
}
}
Solution
1.Use the below formula to remove decimal from calculated column(number fields)
- =TEXT([field_name],0)
For Example: =TEXT(([Price]*[Number]),0)
2.Use JSON code to achieve Word-Wrap for the single text field in SharePoint Online List
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"style":{
"white-space":"wrap"
},
"txtContent": "@currentField"
}
Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange