Question

Is there any way we can add a word wrap for the text which goes beyond the tile size?

enter image description here

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])"
                            }
                        ]
                    }
                ]
            }
        ]
    }
}
Was it helpful?

Solution

1.Use the below formula to remove decimal from calculated column(number fields)

  • =TEXT([field_name],0)

For Example: =TEXT(([Price]*[Number]),0) enter image description here enter image description here

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"
}

enter image description here

Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange
scroll top