如何将注释水平置于句子中单词上方？

debugcn 发表于 Dev

声波

我想要一个css对象，该对象使我可以在句子的特定单词上方或句子的一部分上方放置注释。注释必须始终可见，并且不得移动周围的文本。

在单词比注释长的情况下，很容易获得效果，而我正努力使它在相反的情况下起作用，也就是说，注释比下面的单词长。

在span我看来，该元素最适合完成这项工作，但事实并非如此。我也尝试了tableelement，但是我无法使这两种情况都起作用。

p { font-size: 1.5em }

.highlight {
  position: relative;
  display: inline-block;
  margin-top: 1em;
  color: red;
}

.highlight .annotation {
  position: absolute;
  width:100%;
  left: 0;
  bottom: 80%;
  font-size: 0.75em;
  text-align: center;
  white-space: nowrap;
}

<p>short <span class=highlight>fo<span class=annotation>foo baar foo</span></span> but not centered.</p>
<p>long <span class=highlight>fooooooooooo<span class=annotation>foo baar foo</span></span> and centered.</p>

更清楚地说，这就是我要实现的目标

或Drori

您可以使用来将注释居中left: 50%; transform: translateX(-50%);。left属性与父项有关（占.highlight宽度的50％），而translateX与元素有关（占其.annotation宽度的-50％）。

p {
  font-size: 1.5em
}

.highlight {
  position: relative;
  display: inline-block;
  margin-top: 1em;
  color: red;
}

.highlight .annotation {
  position: absolute;
  /** remove width: 100%; **/ 
  left: 50%;
  bottom: 80%;
  transform: translateX(-50%);
  font-size: 0.75em;
  white-space: nowrap;
}

<p>short <span class=highlight>fo<span class=annotation>foo baar foo</span></span> but not centered.</p>
<p>long <span class=highlight>fooooooooooo<span class=annotation>foo baar foo</span></span> and centered.</p>

要使注释扩大带注释的文本，您可以将其设置.highlight为内联flexbox列（反向），并将项目与中心对齐：

p {
  font-size: 1.5em
}

.highlight {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: center;
  color: red;
}

.highlight .annotation {
  margin-bottom: 0.1em;
  font-size: 0.75em;
  white-space: nowrap;
}

<p>short <span class=highlight>fo<span class=annotation>foo baar foo</span></span> but not centered.</p>
<p>long <span class=highlight>fooooooooooo<span class=annotation>foo baar foo</span></span> and centered.</p>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。