SharePoint - Wrap text in gallery view

Microsoft

Hi All,

 

Been scouring a while now looking for an answer. I've seen a lot of posts about this but cannot get anything to work. I am trying to get the 'new title' column to wrap the text so the entire title shows instead of being clipped. 

amccormack_0-1662056658732.png

 

I go to the list > format view > format columns > new title column and then advanced. But anything I try doesn't work.

 

I'm new to JSON so I know I'm screwing something up.

 

This is the last code that I tried that seemed to work for others

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style":{
        "white-space":"wrap"
  }, 
  "txtContent": "@currentField"
}

 

Thanks in advance,

5 Replies

@amccormack You need to use the view formatting instead of column formatting.

 

As you are using tile/gallery list view, you have to customize the "Gallery" view:

  1. Go to list
  2. Click on "Switch view options" dropdown (where you select list view) from top right corner
  3. Select "Format current view"
  4. Select "Gallery" under "Choose Layout" dropdown
  5. Click on Advanced mode
  6. Find the code for Title column in existing JSON
  7. Make changes in the JSON & Save  

ganeshsanap_0-1662095727746.png

 

Follow documentation for more information: view-gallery-formatting 

Similar thread for more information: (SP List) How to wrap a text in the format view? 


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.

Unfortunately, that didn't work. But I will check out the documentation you shared and see if I can come up with something. Thanks for the help.

@amccormack did you ever figure it out? Having the exact same problem. Nothing works. The json editor keeps saying it’s not valid code and won’t even save in sharepoint online. 

@bakline @amccormack I was able to get the title to wrap using a combo of white-space and word-break. I think what was key was placing the code below "txtContent."

 

                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                  "role": "heading",
                  "aria-level": "3"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])",
                "style":{
                  "white-space": "wrap",
                  "word-break": "keep-all"}

 

Here is how this looks in practice: 

 

ALOE_2023_0-1710280679422.png

 

You rule.