html - 如何强制元素与上一个元素的最后一个字保持在同一行？

Question

这类似于 How can I force two elements to always stay on the same line in a <td> ，但我希望该元素仅与前一个元素的 -last word- 对齐。

例子

<th>
  {dynamic text}
  <i>{static icon}</i>
</th>

如果有足够的空间，我们会得到:

dynamic text here{icon}

如果没有足够的空间，它会换行:

dynamic text
here{icon}

但它不应该像这样将 {icon} 放在它自己的行上:

some text
here
{icon}

我希望静态图标贴在动态文本的最后一个字上。

Answer 1

你应该使用nowrap。这是 docs . nowrap 让您可以在一行中保留多个单词而不会中断。

看看这个codepen .

CSS:

.nowrap {
  white-space: nowrap;
}

HTML:

Some <span class="nowrap">text with</span> extra text.