Wrap single line text in the Title Column so that it breaks while maintaining hover/single click.

[CH4646]

@MarkBAndR was very helpful in another thread, and recommended I add this here.

I have a Sharepoint List (in List view) being fed from a Microsoft Form. The List has a PowerApp that opens to show the generated item's details. All works the way I want it to besides one design flaw.

In it's natural state, the Title text runs until the column width edge and then shows an ellipsis and does not show the rest of the title. I'd like that title to run onto the next line, and not be hidden behind that ellipsis.

However, when you add any kind of text wrapping in my SharePoint List's Title column formatting it loses the "hover to show underline" and single click capabilities. As soon as I add any kind of text wrapping JSON in my Column format settings the items in that Column change. They can still be clicked, but it doesn't hover and underline, and it only opens on a double click. It's not extremely intuitive for my regular user, and I don't want to lose that ease of use functionality. I do however need to show all of my title at once.

Is there a way to maintain the hover over title of item (becomes underlined) and then a single click to open the PowerApp?

Here is the code i am using currently in my column format advanced settings:

{

"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",

"elmType": "div",

"style": {

"box-sizing": "border-box",

"padding": "0 2px",

"overflow": "hidden",

"text-overflow": "ellipsis"

},

"attributes": {

"class": "sp-field-fontSizeMedium"

},

"txtContent": "[$Title]"

}

Thanks

[#2 · Accepted solution]

Hi @CH4646 

You need to add:

  "customRowAction": {
    "action": "defaultClick"
  }

https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-syntax-referen...

If you like the JSON you currently have, it would become:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "box-sizing": "border-box",
    "padding": "0 2px",
    "overflow": "hidden",
    "text-overflow": "ellipsis"
  },
  "attributes": {
    "class": "sp-field-fontSizeMedium"
  },
  "txtContent": "[$Title]",
  "customRowAction": {
    "action": "defaultClick"
  }
}

If you want it to look just like standard SharePoint, then you would use:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "style": {
    "box-sizing": "border-box",
    "padding": "0 2px",
    "overflow": "hidden",
    "text-overflow": "ellipsis"
  },
  "attributes": {
    "class": "ms-Link root_137a7565 nameField_c45bee6b clickable_c45bee6b  "
  },
  "txtContent": "[$Title]",
  "customRowAction": {
    "action": "defaultClick"
  }
}

That has all the same formatting in the "class"

-Mark

[#3]

Thank you Mark. This worked perfectly. Thank you so much for all your help. You're the best.

-Chris