css - 使用 HTML 标签和 CSS 设置文本中重叠注释的样式

Question

我想用类别注释文本。每个类别都有特定的颜色。此外，我想专注于重叠注释的可视化。

注释和原子

被注释的文本部分(用户选择)，我称之为原子。

对我来说有4种原子可以重叠，描述如下:

1. Lorem { [ ipsum ] } dolor sit amet, consetetur sadipscing elitr. (身份)
2. { Lorem [ ipsum ] dolor } sit amet, consetetur sadipscing elitr. (包容)
3. Lorem { ipsum dolor [ sit amet, } consetetur ] sadipscing elitr。 (重叠)
4. Lorem ipsum dolor sit amet，[ consetetur ] { sadipscing } elitr。 (邻居)

我们假设只有 2 个类别 A 带有 [ ] 和 B 带有 { }。 (但它也适用于更多)

我看到的所有工具都通过背景颜色或不同的样式类型重叠(例如下划线 A 和 B 的背景颜色)。使用背景颜色时，重叠部分通常颜色较深或颜色混合。

CSS 和 SPAN

我的方法是边界原子。所以每个原子都包含在 span 标签中。我对 (3.) 重叠有一些问题。当然，我将其分解为 4 个 span:开始、结束和两个重叠部分。

<span class="A outer start">iam nonumy</span>

<span class="A outer end overlap">
    <span class="B start">
    eirmod
    </span>
</span>

<span class="B end">tempor</span>`

1. 随着更多原子被注释和重叠，行高需要增加。

2. 如何加入具有相同类 A 和 B 的跨度？ (我尝试填充，但它不起作用。我还尝试减少 word-spacing，但它适用于重叠但会破坏正常文本。)

3. 如何使用 z-index 移动 span，我知道它们必须是 inline-block 或 block 元素。如果它们是 block，则 span 分布在多行上。

例子

该示例显示了所有 4 种类型。您还可以看到重叠问题以及我尝试使用 word-spacing 的问题，同样在最后一个示例中，紫色原子应该位于顶部。

http://jsfiddle.net/Bb62u/289/

这是另一个使用 word-spacing 的例子，我必须将它设置为 -10 才能加入这些部分。

http://jsfiddle.net/Bb62u/297/

Answer 1

• 使用percentage/length units或 images使用 vertical-align 使 line-height 流畅

• 使用相对/绝对定位 bookend跨度

  position: relative; text-align:right; /* for the container, */
  position: absolute; left: 0; /* for the left aligned element, */
  display: inline; /* or */
  display: inline-block /* for the right element. */
  

• 使用 white-space:nowrap 避免在 inline-block 或 block 元素中换行

例如:

#container{ position: relative; text-align:right; }
#lefty { position: absolute; left: 0; }
#lefty, #righty { display: inline-block }

<div id="container">
  <span id="lefty"><blockquote>left</blockquote></span>
  <span id="righty"><blockquote>right</blockquote></span>
</div>