diff --git a/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts b/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts
index 86dd2791a71..2bf68f5c767 100644
--- a/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts
+++ b/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts
@@ -89,12 +89,14 @@ export function getMentionDisplayText(completion: ICompletion, client: MatrixCli
  *
  * @param completion - the item selected from the autocomplete
  * @param client - the MatrixClient is required for us to look up the correct room mention text
- * @returns an object of attributes containing HTMLAnchor attributes or data-* attri
+ * @returns an object of attributes containing HTMLAnchor attributes or data-* attributes
  */
 export function getMentionAttributes(completion: ICompletion, client: MatrixClient, room: Room): Attributes {
-    // to ensure that we always have something set in the --avatar-letter CSS variable
-    // as otherwise alignment varies depending on whether the content is empty or not
-    const defaultLetterContent = "-";
+    // To ensure that we always have something set in the --avatar-letter CSS variable
+    // as otherwise alignment varies depending on whether the content is empty or not.
+
+    // Use a zero width space so that it counts as content, but does not display anything.
+    const defaultLetterContent = "\u200b";
 
     if (completion.type === "user") {
         // logic as used in UserPillPart.setAvatar in parts.ts
diff --git a/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts b/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts
index dc89caba65e..7629a5a2913 100644
--- a/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts
+++ b/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts
@@ -173,7 +173,7 @@ describe("getMentionAttributes", () => {
 
             expect(result).toEqual({
                 "data-mention-type": "user",
-                "style": `--avatar-background: url(${testAvatarUrlForMember}); --avatar-letter: '-'`,
+                "style": `--avatar-background: url(${testAvatarUrlForMember}); --avatar-letter: '\u200b'`,
             });
         });
 
@@ -200,7 +200,7 @@ describe("getMentionAttributes", () => {
 
             expect(result).toEqual({
                 "data-mention-type": "room",
-                "style": `--avatar-background: url(${testAvatarUrlForRoom}); --avatar-letter: '-'`,
+                "style": `--avatar-background: url(${testAvatarUrlForRoom}); --avatar-letter: '\u200b'`,
             });
         });