代码之家 › 专栏 › 技术社区 › P. Nick

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

less css

P. Nick · 技术社区 · 6 年前

我在想也许我可以用 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%作为宽度,但它总是父对象的宽度,有时太小,有时太多;因此我使用 最大含量 .

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

不使用JS

编辑:

这是它应该是什么样子的图像。

使用“最大内容”时,宽度总是与其他工具提示不同,这就是为什么我很难将其居中的原因。

2 回复 | 直到 6 年前

Paulie_D 6 年前

使用 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;
             }
        }
    }

NicossB 6 年前

有个办法

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

推荐文章

Christian Luneborg · 星级评定不起作用

6 年前

jinfy · Less mixin不适用于带有逗号的参数

7 年前

Valentyn Stets · Webpack 2 css加载程序在生产构建中替换z-index属性

7 年前

Ruur · Sass通过引用分配变量

7 年前

epeleg · 将较少的混合器转换为SCS

7 年前

Michael · Angular CLI无源映射用于LESS/SASS

7 年前

KnD · 更少的延迟加载问题-在同一css文件中使用mixin和变量的ltr和rtl语言的样式

7 年前

Andy · 如何向现有的Angular 5项目添加更少的内容

7 年前

Øystein Seel · 从grunt迁移后,在网页包中失败的模块更少

7 年前

Patrickvanl · ::前后内容始终在内容上方和下方?

7 年前