首页 文章

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

提问于
浏览 次
5

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

注释和原子

文本的一部分（用户选择），注释，我称为原子 .

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

  • Lorem {[ipsum]} dolor坐下来，念念他们 . （身份）

  • {Lorem [ipsum] dolor}坐下来，念念他们 . （夹杂物）

  • Lorem {ipsum dolor [sit amet，} consetetur] sadipscing elitr . （交叠）

  • Lorem ipsum dolor sit amet，[consetetur] elitr . （邻居）

我们假设只有2个类别A带有[]，B带有{} . （但它也适用于更多）

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

CSS和SPAN

我的方法是 border 原子 . 因此每个原子都包含在 span 标签中 . 我对（3.）重叠有一些问题 . 当然，我把它分解为4 span s：开始，结束和两个重叠部分 .

<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类加入 Span ？ （我尝试填充，但它不起作用 . 我也尝试减少 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/

css user-interface annotations border overlap

1 回答

  • 1
    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>
    回复于

相关问题