时间戳

首页 > 解决方案 > 在html中模拟latex \underbracket（即在句子的特定部分下方写文字）

css - 在html中模拟latex \underbracket（即在句子的特定部分下方写文字）

问题描述

我正在寻找获得这种效果

在此处输入图像描述

即在一段文字下方放置一个括号，然后在该括号下方写文字。是否有可能使用 HTML 和 CSS 获得这样的效果？如果没有，也可以使用javascript。

只需为所选文本添加底部边框即可获得“原始”括号，例如

span.note { bottom-border: 1px solid }

The quick <span class=note>brown fox jumps over the</span> lazy dog.

但是如何在边框下方添加文本？

不知道这个效果有没有名字，我只是想复制\underbraceor \underbracketlatex 命令，就是这样使用的

\documentclass{article}
\usepackage{mathtools}
\begin{document}
$\underbrace{a+b+c}_{d} \quad \underbracket{a+b+c}_{d}$
\end{document}

并生成此输出

在此处输入图像描述

新解决方案

使用此代码，可以将 HTML 代码放在所选文本下方，此处为示例

.above {
    position: relative;
    display: inline-block;
    margin-bottom: 1.5em;
  }
  .above::before {
    position: absolute;
    top: 90%;
    height: 6px;
    width: 100%;
    border: 1.5px currentcolor solid;
    border-top: 0;
    content: "";
  }
  .above .below {
    position: absolute;
    width: 100%;
    left: 0;
    top: 140%;
    font-size: 0.75em;
    text-align: center;
  }
<p>The product <span class="above">2 · 2 · 2 <span class="below">2<sup>3</sup></span></span> can be written as power.</p>

此外，如何将注释水平居中放置在句子中的单词上方？下面的文本可以在任何条件下居中。

标签： css

解决方案

您可以data-*将注释文本的content属性与伪元素的属性一起使用，例如

p { font: 1rem/1.4 Arial; }

[data-annotation] {
  position    : relative;
  white-space : nowrap;
  display: inline-block;
  margin-bottom: 2em;
  cursor: pointer;
}

[data-annotation]::before,
[data-annotation]::after {
  position : absolute;
  z-index  : 1;  
  width  : 100%;
  opacity: .5;
  transition: opacity .5s 0s, color .5s 0s;
}

[data-annotation]::before {
  top    : calc(100% + 2px);
  height : 5px;
  border : 1px currentcolor solid;
  border-top : 0;
  content: "";
}

[data-annotation]::after {
  content    : attr(data-annotation);
  left       : 0;
  font-size  : .75em;
  text-align : center;
  top        : calc(100% + 10px);
  overflow   : hidden;
  text-overflow : ellipsis;
}

[data-annotation]:hover::before,
[data-annotation]:hover::after {
   opacity : 1;
   color   : #578;
}

[data-annotation]:hover::after {
   overflow : visible;
}
<p>
   The quick brown <span data-annotation="What if we remove this?">fox jumps
   over the lazy</span> dog. Lorem ipsum sit dolor amet consectetur dolor 
   adisciplit elit, the quick brown fox jumps over the lazy. Lorem ipsum 
   <span data-annotation="OMG this annotation is really long">sit dolor amet
   consectetur dolor adisciplit elit, the quick brown fox</span> jumps over 
   the lazy. Lorem ipsum sit dolor amet consectetur dolor adisciplit elit, 
   the <span data-annotation="Ooops short element, longer 
   annotation">quick brown</span> fox jumps over the lazy dog.
</p>

为了避免在我使用的跨度内换行white-space: nowrap，我插入了 amargin-bottom所以下一行与上一行有适当的间距。

边框的颜色设置为currentcolor以匹配文本的颜色。还尝试插入一个小的不透明度，以提高正文的易读性。

推荐阅读