0

我目前想知道在不更改流规则的情况下将动态格式应用于 HTML 页面中的内容的能力。从表面上看，这似乎很简单，因为您可以选择 DOM 的一个子集并批量应用。但是，如果您只想将该格式应用于特定对象的文本的一部分，这将不起作用。

例如，格式化：

<div>Let's start my format here <span> and here </span> and <br> here too. <br> But not here.</div>

如果您想<br> But not here.从格式中排除，则对于任意布局的情况没有明确的方法可以做到这一点，即使您手动这样做也是如此。一种方法是将 div 分解为 span 部分，然后以不同的方式格式化它们。不幸的是，将任意 HTML 包装在内联元素中会导致一些不幸的副作用（例如，<br>跨度中的任何标记都将被视为不存在）。使用块元素包装器，就像通过添加不存在的中断来引入类似的问题。我似乎找不到一种方法来声明一个 DOM 组，它可以像父对象中的纯文本一样简单地表现出来。

因此，我试图找出一个很好的通用解决方法来引入显示级格式，同时保留任何布局格式。这种格式可以包括文本格式（例如，突出显示、强调）或动态效果（例如，隐藏/显示）。我可以想到一些假设的解决方案，但我不确定在实践中实际上有什么（如果有的话）：

  1. 一个现有的内联布局元素，例如 span，它不会杀死您的换行符和其他格式请求。
  2. 使用 CSS 制作自定义元素（例如 #1）的能力。也许磨合或继承显示标签可能对此有用？（https://developer.mozilla.org/en-US/docs/Web/CSS/display）然而，他们似乎都没有解决这个问题。
  3. 一种防止跨度破坏其内部格式标记的方法。
  4. 一个分组元素，作为布局格式的传递（即，出于布局目的，被视为未标记的文本），但允许显示格式。

人们会认为这将是一件简单的事情。毕竟，不难想象想要将一个 div 分成两个不同的部分，它们的文本格式略有不同，同时保留它们的布局格式。但是，我似乎找不到适合这项工作的工具。

4

1 回答 1

0

在看了很长一段时间之后，我想出的最好的方法是仅对文本节点使用 span 包装器，同时破坏 span 的默认 CSS 格式。这有其缺点，但值得庆幸的是，人们经常不理会基本跨度类。

但是，进一步考虑，我认为最好的解决方案实际上是使用webcomponents.js制作一种新的跨度类型，然后使该跨度类型始终继承父格式。特别是如果该跨度类型有一个非常随意的名称（例如，<span-(some guid)/>），那应该足以防止任何意外冲突的机会。我还发现，通过仅包装文本节点，不会丢失换行符或其他格式，因为这些元素永远不会存在于文本节点中。

我不一定说这是最好的答案，但它是迄今为止我见过的最好的答案。

于 2014-12-23T15:28:18.490 回答