How to Add a Mail Icon and Prevent Text Wrapping in SharePoint JSON
Question details
The user needs to format a SharePoint column using JSON to display a mail icon alongside an email address, while ensuring the text truncates with an ellipsis rather than wrapping to a new line and increasing the row height.
- Product
- Microsoft SharePoint
- Device & OS
- not provided
- Scenario
- Customizing a SharePoint list view to improve layout consistency and visually represent email links without breaking the table's visual structure.
- Observed behavior
- The custom JSON code currently produces syntax errors, fails to align the layout correctly, and allows long email addresses to wrap, which unintentionally widens the row.
Ensure you have the appropriate site permissions to edit column formatting in your SharePoint list and prepare a plain text editor to modify and validate your JSON code before applying it.
Apply CSS Text-Overflow Properties in JSON Formatting
Use standard CSS attributes within the SharePoint JSON schema to structure the layout, place the icon, and enforce text truncation with an ellipsis.
To prevent text wrapping and display an ellipsis (...), you must combine three specific CSS properties on the text element: white-space, overflow, and text-overflow. Placing the icon in a separate span alongside the text ensures proper alignment.
Navigate to your SharePoint list, click the column header containing the email addresses, select 'Column settings', and click 'Format this column'.
At the bottom of the formatting pane on the right side of the screen, click 'Advanced mode' to switch from the basic builder to the JSON editor.
Write your JSON to include a parent `div` element. Inside the `children` array of this div, create a `span` element for the icon followed by an `a` (anchor) element for the email hyperlink.
In the `style` object of your anchor or text element, add the properties: `"white-space": "nowrap"`, `"overflow": "hidden"`, and `"text-overflow": "ellipsis"`. You may also need to set a specific `"width"` or `"max-width"`.
In the `span` element intended for the icon, use the `attributes` object to set `"iconName": "Mail"`. Add a right margin in its style object to space it away from the text.
Click 'Save' at the bottom of the pane. Review your SharePoint list to ensure the icon is visible and long email addresses properly truncate.
Separate the Icon and Text into Two Columns
If precise alignment within a single column proves difficult, you can separate the mail icon and the email address into two distinct columns.
Manage Your Documents Seamlessly with WPS Office
While SharePoint is excellent for managing lists and complex metadata using JSON, handling the actual documents stored within those environments requires a reliable office suite. WPS Office is a highly compatible, lightweight, and free alternative to Microsoft Office that allows you to effortlessly view, edit, and create Word, Excel, and PowerPoint files.
- 1. Download WPS Office: Visit the official WPS website to download the free installation package for your PC or Mac.
- 2. Install the Application: Run the installer and follow the simple on-screen instructions to complete the setup in minutes.
- 3. Open Your Files: Launch WPS Office to instantly open and edit your exported SharePoint documents with perfect format retention.
Frequently Asked Questions
Why is my SharePoint column formatting JSON showing syntax errors?
JSON requires strict formatting. Common reasons for errors include missing commas between properties, unclosed curly brackets, trailing commas at the end of an array, or missing quotation marks around property names and values. Always validate your code using a JSON validator.
What CSS properties stop text from wrapping in a SharePoint list?
To prevent text from wrapping and display an ellipsis, you must apply three specific style properties to the text container: `white-space: nowrap` (stops wrapping), `overflow: hidden` (hides overflowing content), and `text-overflow: ellipsis` (adds the '...').
Where can I find a list of supported icons for SharePoint formatting?
SharePoint column formatting supports Fluent UI icons (formerly Office UI Fabric). You can find a complete, searchable list of available icons and their exact names in the official Microsoft Fluent UI documentation.
