强制图标“粘贴”到文本

Question

我希望内联图标“粘”到它们的关联文本上，为此我使用 U+2060 WORD JOINER 来“连接”图标及其后面的单词。

单词 joiner 不产生任何空格，并禁止在其位置换行。

这应该确保即使换行，图标也不会在行尾自行卡住。但它不起作用（至少对我来说，在最新的 Chrome 上）。

body {
  font-family: 'Meiryo', 'Verdana', sans-serif;
  line-height: 1.5;
}
#test {
  width: 200px;
  border: 1px solid black;
}
#test img {
  vertical-align: bottom;
}

<p id="test">You obtained a <img src="//via.placeholder.com/24" />⁠MacGuffin!</p>

虽然我知道我可以使用 HTML 来实现此效果，例如使用 <nobr>、<span style="display: inline-block">、<span style="white-space: nowrap"> 或其他几个，但我想避免在这种情况下添加 HTML。主要是因为，如果项目名称超过一个单词，我仍然希望项目能够换行。我只是想确保图标和它之后的第一个单词之间没有换行符。

我可以发誓这曾经可以工作，所以我不知道是 Chrome 的更新破坏了它还是我只是记错了。或者也许它从来不应该工作？编辑可以确认它曾经在 2020 年 1 月 16 日工作，根据我在 Discord 上告诉我的朋友的激动消息。

Answer 1

希望这能解决问题：

它似乎适用于我将容器设置为的任何宽度，并将与 foo 的任何宽度保持连接。

it-helped-me