使绝对元素的宽度适合内容

Posted 2023-02-16

【中文标题】使绝对元素的宽度适合内容

【英文标题】：Fit width of absolute element to content

【发布时间】：2021-11-11 16:21:39

【问题描述】：

我正在尝试自定义 element-ui 框架的工具提示宽度，因为工具提示中的文本被错误地破坏了。

这里生成的工具提示元素放置在body标签的底部

<div role="tooltip" id="el-tooltip-8061" aria-hidden="true" class="el-tooltip__popper is-dark popper-width" style="transform-origin: center top;z-index: 2031;/* display: none; */">
   <div data-v-65209316="" class="row">
      <div data-v-65209316="" class="col-5">Employee</div>
      <div data-v-65209316="" class="col-7">John Smith</div>
   </div>
   <div x-arrow="" class="popper__arrow" style="left: 77px;"></div>
</div>

这是我的 vue 代码：

<el-tooltip placement="bottom" theme="dark" popper-class="popper-width" :popper-options="customPopperOptions">
    <template slot="content">
        <div class="row">
            <div class="col-5">
                Employee
            </div>
            <div class="col-7">
                John Smith
            </div>
        </div>
    </template>
</el-tooltip>

和

customPopperOptions() 
  return container: document.body, boundariesElement: document.body

【参考方案1】：

我看到您正在使用引导类，您是否考虑过将它们分开，因为您的 12 网格在您的员工工具提示上占用的空间更少。第一关， 试着让他们出去玩：

       <div class="row">
            <div class="col-6">
                Employee
            </div>
            <div class="col-6">
                John Smith
            </div>
        </div

看看这是否有效，应该分开差异。如果这会导致问题，那么您可能需要调整您的 CSS 代码，因为它看起来好像您的类 .popper-width 具有设定的宽度。

【讨论】：

它只适用于这个用例，但如果有更长的员工姓名也是不正确的损坏.. 是的，我的类 popper-width 在那里，但我没有添加任何样式，我可以使用它添加了固定宽度，但我想要动态宽度以适应内容

popper-width 类是由javascript自动生成的吗？如果是这种情况，您可能必须在 CSS 中使用 !important 覆盖该类。如果我能看到 popper-width CSS 将会很有帮助，因为它现在可能就在这里，您需要解决这个问题

它是我的课，因为我尝试像你说的那样添加我的自定义宽度，但它没有用