帶有水平捲曲支架的標籤文本

我正在顯示句子，某些短語來自某個班級。現在，我想用上面的一個大括號將這些短語的類包括在內，如附加的模型所示。帶有水平捲曲支架的標籤文本

我的問題是：什麼是實現這種功能的最佳方式？有沒有任何代碼示例？

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

帶有水平捲曲支架的標籤文本

回答

相關問題