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

本文介绍了使用 HTML <SPAN> 在文本中设置重叠注释的样式标签和 CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

注释和原子

文字部分(用户选择)，有注释，我称之为原子.

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

Lorem { [ ipsum ] } dolor sat amet, consetetur sadipscing elitr.(身份)
{ Lorem [ ipsum ] dolor } 坐下来，consetetur sadipscing elitr.(包含)
Lorem { ipsum dolor [sit amet, } consetetur ] sadipscing elitr.(重叠)
Lorem ipsum dolor sat amet, [ consetetur ] { sadipscing } elitr.(邻居)

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

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

CSS 和 SPAN

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

<span class="A external start">iam nonumy</span><span class="A外端重叠"><span class="B start">埃尔莫德</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 流体

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

位置:相对；文本对齐:右；/* 对于容器，*/位置:绝对；左:0；/* 左对齐元素，*/显示:内联；/* 或者 */display: inline-block/* 用于正确的元素.*/

使用 white-space:nowrap 避免在 inline-block 或 block 元素中包裹文本

例如:

#container{ position: relative;文本对齐:右；}#lefty { 位置:绝对；左:0；}#lefty, #righty { display: inline-block }


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

I want to annotate text with categories. Each categorie has a specific color. Also, I want to focus on the visualization of overlapping annotations.

Annotations and Atoms

The part of the text (user selection), which is annotated, I call atoms.

For me there are 4 types of atoms which can overlap, described as follows:

Lorem { [ ipsum ] } dolor sit amet, consetetur sadipscing elitr. (Identity)
{ Lorem [ ipsum ] dolor } sit amet, consetetur sadipscing elitr. (Inclusion)
Lorem { ipsum dolor [ sit amet, } consetetur ] sadipscing elitr. (Overlap)
Lorem ipsum dolor sit amet, [ consetetur ] { sadipscing } elitr. (Neighbor)

We assume there are only 2 categories A with [ ] and B with { }. (but it works for more too)

All the tools I looked at overlap by background-color or different style types (like underlining A and background-color for B). When using background colors, the overlapping parts have usually a darker or a mixed color.

CSS and SPANs

My approach is to border the atoms. So each atom gets wrapped in a span tag. I have some problems with the (3.) overlap. Of course, I broke it down to 4 spans: start, end and two for the overlapping part.

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

The line-height needs to increase as more atoms are annotated and overlapping.
How do I join the spans with the same class A and B ? (I tried padding, but it is not working. Also I tried to decrease the word-spacing, but it works for the overlaps but breaks the normal text.)
How do I move spans using z-index, I know they have to be inline-block or block elements. If they are block, a span is spread over more than one line.

Example

The example shows all 4 types. Also you can see the problem with the overlap and my attempt to use word-spacing, also in the last example, the purple atom should be at the top.

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

Here is another example with word-spacing, I have to set it to -10 to join the parts.

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

解决方案

Use percentage/length units or images with vertical-align to make line-height fluid

Use relative/absolute positioning to bookend the spans

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

Use white-space:nowrap to avoid wrapping of text in inline-block or block elements

For example:

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

这篇关于使用 HTML <SPAN> 在文本中设置重叠注释的样式标签和 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

重叠注释

使用 HTML &lt;SPAN&gt; 在文本中设置重叠注释的样式标签和 CSS