带有水平大括号的标签文本

Question

我正在显示句子，有些短语来自某个 class。现在，我想将这些短语的 class 包含在正上方的大括号中，如随附的模型所示。

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

编辑（添加了当前代码）：

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;
}

Fiddle 代码演示

https://jsfiddle.net/ab0L55v1/

Answer 1

使用 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 是一种轻量级替代方案，具有更少的功能和更小的占用空间。

Answer 2

这是一个解决方案，全部使用 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>

Answer 3

一个简单的选项，虽然不太时髦的是使用<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>.

带有水平大括号的标签文本

Label text with a horizontal curly bracket

html

css

pseudo-element