带有水平卷曲支架的标签文本
我正在显示句子,某些短语来自某个班级。现在,我想用上面的一个大括号将这些短语的类包括在内,如附加的模型所示。带有水平卷曲支架的标签文本
我的问题是:什么是实现这种功能的最佳方式?有没有任何代码示例?
EDIT(当前代码加):
HTML
<token>Effects</token>
<token>of</token>
<token>an</token>
<token>ascorbic</token>
<elem type="drug">
<token>acid-derivative</token>
<token>dentifrice</token>
</elem>
<token>in</token>
<elem type="person">
<token>patients</token>
</elem>
<token>with</token>
<elem type="disease">
<token>gingivitis</token>
</elem>
CSS代码
的token {
margin-left: 6px;
}
小提琴演示3210
下面是所有使用CSS和伪元素(以及用于标记的附加HTML元素)完成的解决方案。它应该是不言自明的,但如果你有关于它的问题,只是问...
.container1 {
display: inline-block;
margin-top: 50px;
border: 1px solid #aaa;
padding: 3px 8px 0 0;
}
token {
margin-left: 6px;
}
elem[type="drug"],
elem[type="person"],
elem[type="disease"] {
position: relative;
}
elem[type="drug"]::after,
elem[type="person"]::after,
elem[type="disease"]::after {
content: "";
position: absolute;
top: -1em;
left: 3%;
width: 94%;
height: 0.5em;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
z-index: 10;
}
.label {
position: absolute;
top: -3em;
left: 3%;
width: 94%;
z-index: 10;
text-align: center;
}
.label:after {
content: "|";
position: absolute;
top: 1.2em;
left: 3%;
width: 94%;
z-index: 10;
text-align: center;
color: #aaa;
}
.drug {
color: red;
}
.person {
color: blue;
}
.disease {
color: green;
}
<div class="container1">
<token>Effects</token>
<token>of</token>
<token>an</token>
<token>ascorbic</token>
<elem type="drug">
<token>acid-derivative</token>
<token>dentifrice</token>
<div class=" label drug">
Drug
</div>
</elem>
<token>in</token>
<elem type="person">
<token>patients</token>
<div class=" label person">
Person
</div>
</elem>
<token>with</token>
<elem type="disease">
<token>gingivitis</token>
<div class=" label disease">
Disease
</div>
</elem>
</div>
你好Johannes。您的解决方案很好。干杯。 –
谢谢!我刚刚添加了一些更多的代码片段... – Johannes
只是做了一些与您的代码测试。一切按预期工作。我唯一添加的是'white-space:nowrap;'在CSS中'elem',以防止多个单词元素换行。 –
这不是很容易用HTML和CSS实现。对于高级格式化,我有MathJax的好结果,它允许类似LaTeX的格式。
例如,格式
$\overbrace{\text{Big ones, small ones}}^{Coconuts}\text{, some as big as your head}$
看起来像:
活生生的例子:http://jsfiddle.net/AqDCA/940/
参见:MathJax basic tutorial and quick reference
jqMath是一个轻量级的替代,功能较少和更小的占地面积。
感谢您的回复,Kobi。看起来很棒。不要紧,如果它不是一个纯粹的CSS + HTML解决方案,我会检查你现在提出的解决方案。 –
我有一些问题,包括html元素,即“
一个简单的选择,虽然不那么时尚是使用<ruby>
标签。请注意,这些都是为了东亚字符,并且可能有奇怪的格式与英文文本:
ruby rt {font-size:12px;}
ruby {color:#4a4;}
ruby.drug {color:#44a;}
Maybe this can <ruby class="drug">be done<rt>Drug</ruby> with <ruby>HTML<rt>Han</ruby>.
你有任何代码做任何你展示样机的? – caramba
我没有一个完整的解决方案,但我会开始使关键短语/单词分开'span's:'
抗坏血酸酸衍生洁牙剂 ... ... ...
'。然后你可以通过CSS来解决这些问题(可能是':before'和':after'之类的伪选择器)以及JavaScript。 – domsson