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

SharePoint List view - column value truncated.
SharePoint List view - column value truncated

✔️ 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.
  5. SharePoint Online Modern experience - format column.png
    SharePoint Online Modern experience - format column
  6. 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.
  7. Scroll to bottom and click Advanced mode.
  8. Copy and paste this JSON in the text box "Paste or type your column-formatting JSON here."
  9. { "$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.png
    SharePoint - format column advanced mode
  10. Click Preview to check the display changes and make adjustments.
  11. Once comfortable, click Save.
  12. The changes will be reflected on the view.
  13. You can use similar JSON approach for formatting other column values.
SharePoint column format - wrap text using json.png
SharePoint column format - wrap text using json


⭐ 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:

  • how to wrap the values for a people picker column? it shows [object].
    14 Dec 2020 23:56:20 GMT
  • I have a SPO list with some field headings that are long. Is there a way to force word wrapping only on the header?
    13 Dec 2020 04:43:13 GMT
  • Can I append values from different columns and show them as a hover card using JSON formatting ? including calculated fields
    10 Dec 2020 16:12:34 GMT
  • How to make a column read-only in custom SharePoint Online List view in quick edit?
    10 Dec 2020 11:32:11 GMT
  • Further comments disabled!