How to separate 'Person or Group' column values by a comma and display on one line?

Question

When you select multiple Persons from a Person or Group column in a SharePoint List, each value will be displayed on its own line, eg:

Person_01  
Person_02  

However, a Choice column that allows multiple selections will display selected options as:

Some_Choice_01, Some_Choice_02, Some_Choice_03

Person or Group columns are supported in column formatting:

Supported column types

Is there a way to display multiple Persons separated by commas, so that they can be displayed on one line?

This answer provides a solution for multiple options being selected in a Managed Metadata column:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "=join(@currentField, ', ')"
}

However, when applied to a Person or Group column it outputs this:

[object Object], [object Object]

Additional question:

If I remove any JSON formatting from the Column, and click on the Column title in the front end > Column settings > Edit and set Show profile photos to Yes, then the values are shown on separate lines, eg:

Is there a way to get them to display on one line when Show profile photos is set to Yes?

The solution in the accepted answer causes only the text value to show, ie it removes the picture and surrounding styling.

I can see that setting Show profile photos to Yes wraps the individual values in a <div>, so I suppose it is just a matter of adding a , between those divs.

Answer 1

You can show the names in one line using:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "=join(@currentField.title, ', ')"
}

Output: