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

 

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

注释和原子

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

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

  • Lorem {ipsum}}多尔坐在amet，consetetur sadipscing elitr。 （身份）
  • {Lorem [ipsum] dolor}坐在amet，consetetur sadipscing elitr。 （夹杂物）
  • Lorem {ipsum dolor [sit amet，} consetetur] sadipscing elitr。 （交叠）
  • Lorem ipsum dolor sit amet，[consetetur] {sadipscing} elitr。 （邻居）

    • 我们假设只有两个类别A与[]和B与{}。 （但它也适用于更多）

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

    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>`
  • 随着更多的原子被注释和重叠，行高需要增加。

  • 如何加入与A和B相同的跨度？ （我尝试填充，但它不起作用，另外我试图减少word-spacing ，但它适用于重叠但打破了正常文本。）

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

    • 例

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

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

    这里是另一个word-spacing例子，我必须将它设置为-10来加入这些部分。

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

  • 使用百分比/长度单位或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元素中包装文本

    • 例如： 

    #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>
    链接地址: http://www.djcxy.com/p/75535.html

    上一篇: Styling overlapping annotations in text with HTML <SPAN> tags and CSS

    下一篇: What is the best way to indent text in a DIV when it wraps?