用HTML <SPAN>标记和CSS在文本中设置重叠注释的样式
用HTML <SPAN>标记和CSS在文本中设置重叠注释的样式
提问于 2012-02-21 04:54:12
我想用分类对文本进行注释。每个类别都有特定的颜色。另外，我想重点关注重叠注释的可视化。
注解与原子
文本的一部分(用户选择)，是注释的，我称之为原子。
对我来说，有四种类型的原子可以重叠，描述如下：
- 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才能加入部件。
回答 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>
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9377964
复制相关文章
相似问题
腾讯云开发者
