Wrap breaking words

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