问用HTML <SPAN>标记和CSS在文本中设置重叠注释的样式
EN

Stack Overflow用户

提问于 2012-02-21 04:54:12

回答 2查看 3.5K关注 0票数 6

我想用分类对文本进行注释。每个类别都有特定的颜色。另外，我想重点关注重叠注释的可视化。

注解与原子

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

对我来说，有四种类型的原子可以重叠，描述如下：

Lorem { ipsum } dolor，consetetur sadipscing elitr.(身份)
{ Lorem ipsum dolor }(包括在内)
Lorem { ipsum dolor同，} consetetur sadipscing elitr.(重叠)
Lorem ipsum dolor，consetetur { sadipscing } elitr.(邻居)

我们假定只有2类A和B具有{ }。(但它也适用于更多)

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

CSS和SPANs

我的方法是用边界原子。因此，每个原子被包装在一个span标记中。我对(3)有一些问题。重叠。当然，我将其分解为4个span：start、end和两个用于重叠部分。

<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>`

线高需要增加，因为更多的原子被注释和重叠。
我怎样才能加入同一班的A、B班？(我试过填充物，但不起作用。另外，我试图减少word-spacing，但它适用于重叠，但破坏了正常文本。)
如何使用span移动z-index，我知道它们必须是inline-block或block元素。如果它们是block，则span将分布在多个行上。

示例

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

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

下面是关于word-spacing的另一个例子，我必须将其设置为-10才能加入部件。

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

user-interface

annotations

border

overlap

css

回答 2

Stack Overflow用户

发布于 2012-08-30 09:52:32

用百分比/长度单位或图片配合vertical-align制作line-height流体
使用相对/绝对定位来书尾跨范围位置:相对；文本对齐:右；容器的/*，*/位置:绝对；左: 0；左对齐元素：*/ /*：内联；/*或*/显示:右元素的内联块/*。*/
使用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>

票数 1

Stack Overflow用户

发布于 2020-12-17 09:02:38

重叠跨

负word spacing使文本不可读，如果在本例中更改了屏幕的width，则不会发生连接这些跨度部分的事件。要克服这一问题，请删除word spacing，并将负裕度放在第二个span上。

.marginNeg {
  margin-left: -10px
}

<div class="text">
  <span class="A outer start">kommt eine</span>
  <span class="B start marginNeg">
    <span class="A outer end overlap">neue</span>
  </span>
  <span class="B end">Zeile</span>
</div>