如何使用css重新創建tex的over-underbracket

我需要在HTML中放入一些公式，並且想要說明值的來源。在TeX中，我只需使用overbracket/underbracket包（例如，參見https://tex.stackexchange.com/questions/132526/overbrace-with-square-bracket）。如何使用css重新創建tex的over-underbracket

是否有一個類似的「庫」或任何你會稱之爲使用CSS實現相同的？（我只用方括號就可以）。

我給了它一個嘗試自己重新創建類似的外觀，但我試圖顯示支架時遇到了問題。

F.e.我嘗試使用表格來獲取描述以顯示在公式的上方或下方，但隨後公式的一部分與公式的其餘部分不再位於同一行。此外，使用邊框我無法重建方括號中所示的鏈接...

編輯：所以這應該想象我遇到了這個問題：

CSS

table { 
    display: inline-block; 
}

HTML

<table> 
    <tr><td>+1</td><tr> 
    <tr><td>value #1</td><tr> 
</table> 
<table> 
    <tr><td>value #2</td><tr> 
    <tr><td>+1</td><tr> 
</table> 
= 10

https://jsfiddle.net/jcqjr8ge/

基本上，所有的「+1」和「= 10」應該在同一行上，其中值的描述應該高於或低於值。

來源

2016-07-02 Johannes

爲什麼不旋轉支架？ –

雖然支架必須包含的內容是可變長度的，所以我不認爲這會有所幫助。此外，線對齊的問題仍然存在 – Johannes

因此，你想要這樣的https://jsfiddle.net/3q5b7bbz/？ –

這很容易做到，因爲您只需要一個方形（[）括號。該方法我選擇來解決，這是簡單的使用僞after元素，顯示它阻止突破到一個新行，並給所有的邊，而頂部的邊框：

[data-bracket] { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    position: relative; 
 
} 
 
[data-bracket]:after { 
 
    content: ""; 
 
    display: block; 
 
    height: 6px; 
 
    border: 2px solid black; 
 
    border-top: none; 
 
} 
 
[data-bracket]:before { 
 
    content: attr(data-bracket); 
 
    position: absolute; 
 
    top: 100%; 
 
    font-size: 80%; 
 
    padding: 5px; 
 
    white-space: nowrap; 
 
    left: 50%; 
 
    transform: translateX(-50%) 
 
}

<p>Uber-cool math formula: <span data-bracket="Very hard math">2+2 = 1*4</span> 
 
</p>

要在其下面顯示說明文字，我使用before元素，將它的內容設置爲data-bracket屬性，並將其居中放在「括號」下。

JSFiddle for you to play with

來源

2016-07-02 20:17:15

這真是太神奇了，非常感謝！我還想知道是否有可能實現同樣的目標，但括號頂部（另外）。我試着將'after'元素改爲'before'，但是高度規則將文本向下推進。請參閱https://jsfiddle.net/egv1bqyz/ – Johannes

只需顯示絕對前後的https://jsfiddle.net/aLq4o505/ –

如何使用css重新創建tex的over-underbracket

回答

相關問題