使用HTML <SPAN>标记和CSS为文本中的重叠注释添加样式

Question

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

注释和原子

文本的一部分(用户选择),注释,我称为原子.

对我来说,有4种类型的原子可以重叠,描述如下:

1. Lorem {[ipsum]} dolor坐下来,念念他们.(身份)
2. {Lorem [ipsum] dolor}坐下来,念念他们.(夹杂物)
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. 我如何span使用z-index,我知道它们必须是inline-block或block元素.如果是block,则a span分布在多条线上.

例

该示例显示了所有4种类型.你也可以看到重叠和我尝试使用的问题word-spacing,在最后一个例子中,紫色原子应该在顶部.

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

这是另一个例子word-spacing,我必须将它设置为-10才能加入这些部分.

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

Answer 1

• 使用百分比/长度单位或图像使vertical-align流畅line-height

• 使用相对/绝对定位来预订跨度

  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元素中换行

例如：

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. */

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