带有水平卷曲支架的标签文本

我正在显示句子，某些短语来自某个班级。现在，我想用上面的一个大括号将这些短语的类包括在内，如附加的模型所示。带有水平卷曲支架的标签文本

我的问题是：什么是实现这种功能的最佳方式？有没有任何代码示例？

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

https://jsfiddle.net/ab0L55v1/

来源

2017-03-07 Mad A.

你有任何代码做任何你展示样机的？ – caramba

我没有一个完整的解决方案，但我会开始使关键短语/单词分开'span's：'

抗坏血酸酸衍生洁牙剂 ... ... ...

'。然后你可以通过CSS来解决这些问题（可能是'：before'和'：after'之类的伪选择器）以及JavaScript。 – domsson

下面是所有使用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>

来源

2017-03-07 12:16:55 Johannes

你好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是一个轻量级的替代，功能较少和更小的占地面积。

来源

2017-03-07 11:51:23 Kobi

感谢您的回复，Kobi。看起来很棒。不要紧，如果它不是一个纯粹的CSS + HTML解决方案，我会检查你现在提出的解决方案。 –

我有一些问题，包括html元素，即“”元素。因此，我采用Johannes的解决方案。干杯。 –

一个简单的选择，虽然不那么时尚是使用<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>.

来源

2017-03-07 12:44:59 Kobi

带有水平卷曲支架的标签文本

回答

相关问题