用一个标签缩写几次

Question

我正在编写演练，我希望 reader 能够将鼠标悬停在脚本中任何位置的单词上并获取定义，但我只想定义缩写一次。在 html 或 css 中有什么方法可以做到这一点吗？

Answer 1

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

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

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

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

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

在您的样式表中，您将为 .tooltip 附带的伪元素设置基本样式，然后使用第二个 class:

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

其中最棘手的部分是将工具提示的样式设置为您喜欢的样式。

在下面的示例中，我设置了 white-space: nowrap 来代替伪元素的最小宽度。否则，您会发现文本以非常小的宽度换行。这适用于所有相对较短的定义，但如果您有一些需要大量文本的定义，而另一些定义则需要一个或两个单词的定义，您可能还需要包括伪的 width与第二个 class（用于指定 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;
}

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';
}

<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>

用一个标签缩写几次

abbr several times with one tag

html

css

instances

abbr