logo标签列表

在纯CSS提示框中允许HTML标签

htmlcss
3

我有一个纯CSS的工具提示。

<span data-tooltip="The security code is a 3-digit number<br />on the back of your Visa or Mastercard debit or credit card, or a 4-digit number on the front of your American Express card.">Help</span>

我能允许像<br />这样的HTML标签吗？

.tooltip {
  position: relative;
  top: 3px;
  display: inline-block;
  width: 1.23809524em;
  height: 1.23809524em;
  border-radius: 50%;
  background: #252525;
  text-align: center;
  cursor: pointer;
}
.tooltip .tooltip__anchor {
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  position: absolute;
  top: -5px;
  left: 6px;
}
.tooltip .tooltip__text {
  transition: 0.2s ease;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  text-align: left;
  z-index: 10;
  position: absolute;
  width: 280px;
  background: #fafafa;
  border: 1px solid #ececec;
  padding: 0.61904762em;
  left: 1.48571429em;
  top: -0.92857143em;
  opacity: 0;
  pointer-events: none;
  cursor: default;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.04);
  line-height: 20px;
}
.tooltip:hover .tooltip__text {
  opacity: 1;
}
.tooltip:last-child {
  margin-left: 0.92857143em;
}
[data-tooltip] {
  position: relative;
  overflow: visible;
}
[data-tooltip]:after {
  transition: all .2s ease;
  content: attr(data-tooltip);
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: #252525;
  color: #fff;
  border: 1px solid #e7e7e7;
  padding: 2px 12px;
  pointer-events: none;
  white-space: nowrap;
  font-size: 11px;
  line-height: 18px;
  font-weight: 600;
  border-radius: 2px;
  z-index: 2;
  font-family: 'Open Sans';
}
[data-tooltip]:not(:hover):after {
  opacity: 0;
}
<br /><br /><br />
<span data-tooltip="The security code is a 3-digit number<br />on the back of your Visa or Mastercard debit or credit card, or a 4-digit number on the front of your American Express card.">Help</span>
<br /><br /><br />

谢谢。

JSFiddle: https://jsfiddle.net/buhdkmpj/

你可以在代码中使用回车并使用 white-space:pre; 最终实现换行。https://jsfiddle.net/buhdkmpj/1/ - G-Cyrillus
<br> 不需要也不使用结束斜杠。 - Rob
2个回答
0
0

引用 CSS 2.1规范 第12.2 'content'属性章的相关部分（重点在于我）：

attr(X)
此函数将选择器主题的属性X的值作为字符串返回。

因此，属性值内的HTML标记将被视为字符串，而不是被解析。

但是，您仍然可以使换行符在您的工具提示中显示。只需将[data-tooltip]:after的white-space: nowrap更改为white-space: pre，并在data-tooltip属性中使用换行符代替<br />即可。

Analogic demo JSFiddle。

<br> 标签不需要或使用结束斜杠。 - Rob
@Rob：首先，这是OP问题中提到的，我只是引用了它。此外，加上闭合标签后，它也是一个有效的XML（多语言标记），因此您可以选择将网页作为application/xhtml+xml进行适当、优雅、纯净的XML解析。请注意，斜杠前面的空格是不必要的——这是由Microsoft引入的事实标准。 - Przemek
在HTML中没有必要或理由遵守XML规则。MIME类型永远不会在任何HTML网站上使用，也没有任何理由使用。 - Rob
@Rob：仍有许多人，包括我在内，更喜欢像XHTML1.1一样编写HTML5，包括它应该始终被服务的方式。你是否想遵守这些规则取决于你，但我非常关注标准规范，个人不喜欢允许不合规的规范。使用那种MIME类型将立即显示所有语法错误，从而防止出现错误的堆积。此外，这个斜杠可能没有帮助，但也不会有害，那就是为什么带斜杠的版本仍然比不带的版本更频繁。 - Przemek
@Rob：正如我所说，HTML规范明确指出，您可以以符合XML标准的方式编写，从而允许您使用application/xhtml+xml MIME类型提供网页，这反过来又提供了您所说的错误检查。 - Przemek
显示剩余5条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接