Question

我正在编写一篇演练文章，我希望读者可以在脚本中的任何位置悬停一个单词并获得定义，但我只想要定义abbr一次。在html或css中有没有办法可以做到这一点？

Answer 1

您可以实现此目的的一种方法是使用带有伪元素的自定义工具提示。

首先，在HTML中，您将要定义的单词包装在span（或者<a>或其他）中：

<p>This is a word I want to <span class="tooltip">define</span>.</p>

然后，您可以为工具提示提供第二个类，您可以使用它来设置其内容。这样，您可以在HTML中包装要定义的所有单词，但可以从一个中心位置（样式表）控制其内容，如果定义需要调整，则无需修改HTML。

<p>This is a word I want to <span class="tooltip define">define</span>.</p>

在样式表中，您可以设置与.tooltip一起使用的伪元素的基本样式，然后使用第二类来设置特定内容：

.tooltip.define::before {
  content: 'determine or identify the essential qualities or meaning of';
}

最棘手的部分是将工具提示的风格变为你喜欢的东西。

在下面的示例中，我设置了white-space: nowrap来代替伪元素的最小宽度。否则，您会发现文本的宽度非常小。这适用于所有相对较短的定义，但是如果您有一些定义需要大量文本而其他定义需要单词或双词定义，那么您可能还需要包含伪{的width与您的第二个类（您用于指定content）一起使用的样式中的元素，以避免出现大量容器存在微小内容或大量自动换行以进行长定义的情况。

例如：

.tooltip.longtext {
  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum magna sit amet magna condimentum, id gravida tellus luctus. Nullam posuere eget lacus sit amet pulvinar.';
  min-width: 300px;
}
.tooltip.shorttext {
  content: 'Lorem ipsum';
  min-width: 0;
}

＆＃13;

span {
  position: relative;
  color: blue;
}
.tooltip::before {
  display: block;
  position: absolute;
  z-index: -1;
  top: -100%;
  left: -50%;
  padding: 2px 5px;
  white-space: nowrap;
  font-size: 12px;
  text-align: center;
  background: #565656;
  color: white;
  visibility: hidden;
}
.tooltip:hover {
  cursor: pointer;
}
.tooltip:hover::before {
  visibility: visible;
  z-index: 1;
}
.tooltip.lots::before {
  content: 'many, several';
}
.tooltip.words::before {
  content: 'things that are said';
}
.tooltip.going::before {
  content: 'taking a certain course';
}

＆＃13;

<p style="margin-top: 30px;">This is a very long paragraph that has <span class="tooltip lots">lots</span> and <span class="tooltip lots">lots</span> of <span class="tooltip words">words</span> you want to define, and it just keeps <span class="tooltip going">going</span> and <span class="tooltip going">going</span>, and some of the <span class="tooltip words">words</span> are the same, and you don't want to have to define them more than once.</p>

＆＃13;

abbr几次带一个标签

1 个答案: