如何获得最大内容宽度值的一半？

Question

我正在显示一个工具提示，我希望它在父级中居中，无论它有多长。

我在想也许我可以将 calc() 与 max-content 一起使用，但显然这不是它的工作方式。

*[tooltip] {
    position: relative;
    &:hover {
        &:after {
            content: attr(tooltip);
            display: block;
            position: absolute;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 6px 12px;
            border-radius: 4px;
            position: absolute;
            top: 50px;
            left: 0px;
            width: max-content;
            font-weight:bold;
            font-size:0.9em;
            text-align:center;
            margin-left: calc(max-content / 2);
        }
    }
}

我总是可以使用 100% 作为宽度，但它总是父级的宽度，有时太小，有时又太大；因此我使用 max-content.

<div tooltip="Hello World">Hover me.</div>

如何在不使用 JS 的情况下解决这个难题？

编辑：

这是它的外观图片。

无论工具提示中有多少文本，都应始终居中。如果我使用 100% 宽度的方法，它将停留在中间但始终具有相同的宽度，导致单词分解成新的行。

通过使用最大内容，宽度总是与其他工具提示不同，这就是为什么我很难将其居中。

Answer 1

使用 transform

  *[tooltip] {
        position: relative;
        &:hover {
            &:after {
                content: attr(tooltip);
                display: block;
                position: absolute;
                background: rgba(0, 0, 0, 0.8);
                color: white;
                padding: 6px 12px;
                border-radius: 4px;
                position: absolute;
                top: 50px;
                /* this */
                left:50%; 
                transform:translateX(-50%);

                width: max-content;
                font-weight:bold;
                font-size:0.9em;
                text-align:center;
             }
        }
    }

Answer 2

这里有一个方法

.parent {
  display: inline-block;
}

*[tooltip] {
  position: relative;
}

*[tooltip]:hover:after {
  content: attr(tooltip);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  display: table-cell;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  left:50%; 
  transform:translateX(-50%);
}

<div tooltip="Hello World" class="parent">Hover me.</div>

如何获得最大内容宽度值的一半？

How can I get half the value of max-content width?

css

less