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": "",
      "elmType": "div",
      "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.


  • 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!
Try Out Code2care Dev Tools:


Android Java Linux Microsoft Google Python macOS Notepad++ Microsoft Teams CSS PHP SharePoint Html Linux C Programs Bootstrap jQuery Sublime Android Studio Facebook Eclipse WhatsApp News MySQL Json HowTos JavaScript FTP S3


Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and Software Developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include Learnings, Tutorials, Trouble-Shooting steps, Video Tutorials, Code Snippets, How Tos, Blogs, Articles, etc.
🎉 We are celebrating the 10th years of Code2care! Thank you for all your support! We hope we made a difference.
We strong support Gender Equality & Diversity.

We stand in solidarity with Ukraine - Make a donation to UNHCR -