Wrap breaking words

[Micraf]

Hi Everyone,

I have managed to get the words to wrap in the gallery view of a list, however, it breaks in the middle of words and I cannot figure out how to rectify this.  JSON code below.

I am after a simple tile that displays one text field - [$Title].  Example of output below.

Will someone please have a look and let me know how to fix this?

Thanks in advance,

Micraf.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 100,
  "width": 200,
  "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": "div",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary"
                },
                "Style": {
                  "white-space": "wrap"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          }
        ]
      }
    ]
  }
}

[#2]

If I take out the Div for the sp-card-subcontainer the words wrap correctly so I think it may have something to do with this????

But, by leaving this out the view no longer has the border around each item.

Anyone have any thoughts on this? 

[#3 · Accepted solution]

@Micraf Try using combination of white-space , word-wrap and word-break which suits your requirements.

I noticed sp-card-subcontainer class is using word-break: break-all which might be causing this problem. Try using other values for this property and see which one works for you.

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

[#4]

Thanks @ganeshsanap
I will try your suggestions and come back to you. How did you know the sp-card-subcontainer is using word-break: break-all?
Also, along the lines of my other post you replied to, where do I find the valid parameters for word-break?

Thanks.

[#5]

@ganeshsanap
Thanks mate - worked a treat. I added the style "word-break":"normal" after the after the subcontainer class. See below.
Thanks again.

"elmType": "div",
"attributes": {
"class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
},
"style":{
"word-break":"normal"
},

[#6]

@Micraf Great, glad it worked for you!

I checked the CSS for sp-card-subContainer class from browser's developer tools & noticed the word-break: break-all property.

---

Please consider giving a Like if my post helped you in any way.