配置 HTML 元素使其行为类似于文本字符

Question

是否可以将 HTML 元素（自定义元素或内置元素）配置为将其视为单个文本（非空白）字符 - 也就是说，它有一个隐含的

<nobr>

包裹在其自身和相邻文本周围。

我的用例是制作某些像文本一样处理的音乐符号（如

F#

中的升号，但更复杂）。所以我可以写

the note F<my-sharp></my-sharp> is nice

并且知道

F

和

<my-sharp>

之间永远不会有换行符，相当于

the note <nobr>F<my-sharp></my-sharp></nobr> is nice

。 css

white-space: nowrap

会配置

<my-sharp>

内部的任何内容，但不适用于其后面的

F

。

我想避免使用

<nobr>

解决方案（我已经实现了），部分原因是它破坏了封装，让自定义元素可以操作其外部元素的 DOM，而且还因为我在

contenteditable

中使用它块，因此如果有人在 F 之后添加文本，例如

the note <nobr>F or G<my-sharp></my-sharp></nobr> is nice

，则

<nobr>

会覆盖空白，这不是有意的。

像

display: inline-character

这样的css属性似乎不存在，但也许还有另一种方法？

Answer 1

我认为一方面你在这里想得太多了，但另一方面你没有就你的实际问题提供足够的信息。这可能是一个 XY 问题，您询问的是感知的解决方案而不是实际问题。

需要考虑的一些一般事项：

您不应该使用

<nobr>

元素。它已被弃用。您也不应该创建自定义元素，例如

<my-sharp>

（除非您正在创建 Web 组件）。而是在具有类的合适元素上使用 CSS

white-space: nowrap

，例如

<span class="note">...</span>

此外，您不需要自定义元素来显示尖锐符号。它可以直接使用 (F♯) 或使用 HTML 实体：

F♯

= F♯。默认情况下执行此操作时，字符之间不能有换行符，因此您不需要

white-space: nowrap

。

如果问题在于用户在内容可编辑元素中写入

<span class="note">...</span>

（或者在您的情况下为

<nobr>...</nobr>

），则应该可以通过编程方式阻止这种情况。

实际上使用

contenteditable

可能非常棘手。都是你自己写的吗？使用几个非常强大的现有组件之一可能会更容易，例如，仅举一个：CKEditor它们为用户提供了输入特殊字符（例如

♯

）的方法，我相信有些组件具有诸如仅允许元素中的特定文本。

如果这没有帮助，您需要展示更多您正在尝试解决的实际问题。