位于父行外的伪元素提前换行

Question

我使用工具提示属性和 ::after 伪元素为我的网站创建了一个简单的工具提示系统。不幸的是，因为伪元素位于其父元素之外，所以它想要换行到父元素的大小。有没有办法在不完全阻止包装的情况下防止这种情况？

Fiddle: https://jsfiddle.net/v5zhf2nu/1/

CSS:

[tooltip]
{
    position: relative;
    cursor: help;
}

[tooltip]::after
{
    pointer-events: none;
    position: absolute;
    content: attr(tooltip);
    left: 100%;
    top: 50%;

    margin-left: 3px;
    background-color: #111111;
    color: white;
    width: auto;
    padding: 3px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: normal;
    padding-left: 6px;
    padding-right: 6px;
    display: none;
    z-index: 3;
    max-width: 1000px;
}

[tooltip]:hover::after
{
    display: inline-block;
}

HTML:

<span tooltip = "This is some information! Unfortunately, it seems to want to line break very early.">Mouse over me!</span>

Answer 1

将 right 设置为足够小的值，至少减去最大宽度减去填充、边框和边距：

right: -1015px;

如果您不想进行计算，可以使用像 -100000000000px 这样的小值，但是您将需要 max-width。如果你使用了确切的值，你可以删除 max-width 如果你想要

max-width: -1000px;

最后，使用其中之一：

width: fit-content;
width: max-content;

请注意，它们尚未得到广泛支持，因此您可能需要供应商前缀。

[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::after {
  pointer-events: none;
  position: absolute;
  content: attr(data-tooltip);
  left: 100%;
  top: 50%;
  margin-left: 3px;
  background-color: #111111;
  color: white;
  width: auto;
  padding: 3px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: normal;
  padding-left: 6px;
  padding-right: 6px;
  width: auto;
  z-index: 3;
  right: -100000000000px; /* Tiny value */
  max-width: 1000px;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

<span data-tooltip="This is some information! Unfortunately, it seems to want to line break very early.">Mouse over me!</span>
<br /><br /><br />
<span data-tooltip="This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. ">Mouse over me!</span>

Answer 2

替换：

[tooltip]::after
{
    position: absolute;
    left: 100%;
}

与：

[tooltip]::after
{
    position: relative;
    left: 0;
}

此外，我认为您不需要 max-width。

https://jsfiddle.net/v5zhf2nu/2/

Answer 3

不要让元素相对定位。这样 pseudo-element 的包含块将成为视口（或者，希望是一个足够宽的元素）。

[data-tooltip] { position: static; } /* default value */

不要设置 pseudo-element 的 left 属性。 auto 将计算到静态位置，这是元素的末尾，因为它是 ::after pseudo-element.

[data-tooltip]::after { left: auto; } /* default value */

使用一些边距代替 top，例如

[data-tooltip]::after {
  top: auto; /* default value */
  margin-top: .75em;
}

pseudo-element 的宽度不受元素宽度的限制，仅受视口（或最近定位的祖先元素）的限制。您可以使用 max-width:

减少（但不能增加）该限制

[data-tooltip]::after { max-width: 1000px; }

[data-tooltip] {
  cursor: help;
}
[data-tooltip]::after {
  pointer-events: none;
  position: absolute;
  content: attr(data-tooltip);
  margin-top: .75em;
  margin-left: 3px;
  background-color: #111111;
  color: white;
  width: auto;
  padding: 3px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: normal;
  padding-left: 6px;
  padding-right: 6px;
  width: auto;
  z-index: 3;
  max-width: 1000px;
}

<span data-tooltip="This is some information! Unfortunately, it seems to want to line break very early.">Mouse over me!</span>
<br /><br /><br />
<span data-tooltip="This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. This is some information! Unfortunately, it seems to want to line break very early. ">Mouse over me!</span>

位于父行外的伪元素提前换行

Pseudo-element positioned outside parent line wraps early

html

css

pseudo-element