How to wrap column text in SharePoint Online Modern List Grid View using JSON formatting

You can apply column formatting to customize the display of fields in Modern SharePoint lists and libraries view by using JSON. The column formatting does not change the actual data in the list item or file, it only changes how the value is displayed to users in the user interface.

⛔️ Longer values truncated in SharePoint Modern List View experience

✔️ How to wrap long text values in SharePoint Modern experience for custom list

1. Navigate to your modern SharePoint list view.
2. Click on the column name.
3. Click Column Settings.
4. Click Format this column.

SharePoint Online Modern experience - format column
5. A pane will open from right side of screen with title 'Format [Column Name] column'. Make sure 'Format columns' tab is selected and your column is selected in Choose Column drop down.
6. Scroll to bottom and click Advanced mode.
7. Copy and paste this JSON in the text box "Paste or type your column-formatting JSON here."

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

CSS style for wrapping text --> "white-space":"wrap"


SharePoint - format column advanced mode
8. Click Preview to check the display changes and make adjustments.
9. Once comfortable, click Save.
10. The changes will be reflected on the view.
11. You can use similar JSON approach for formatting other column values.

⭐ Note that the JSON formatting changes only the display of column values on the UI. The column headers cannot be controlled and wrapped.

⭐ The JSON formatting changes apply to Grid View editing as well.

Comments: