javascript - Css 工具提示没有很好地调整大小和包装

Question

我创建了一个自定义的 css 工具提示，但是工具提示的宽度非常窄(每行只有 1-2 个字)。

Fiddle example of the problem

我希望工具提示大小是动态生成的，因为我将在几个文本长度不同的地方使用它(文本也可能在以后更改)。我需要它是动态的另一个原因是它需要允许浏览器调整大小和移动 View 。

我做了一些研究并尝试了(不限于)以下属性:

width: auto; /*doesn't change anything*/
max-width: ;/*max and min not useful as I want it to be dynamic*/
min-width: ;
white-space: normal; /*neither change anything*/
text-wrap: normal;

以上似乎都没有给我解决方案。

我无法在此元素中使用 Bootstrap ，但如果 JavaScript 提供了可能的解决方案，我可以添加它。

在此先感谢您的帮助。

Answer 1

解决方案是将 position: absolute; 更改为 position: relative。然而，这搞乱了一些其他需要修复的依赖样式。

推理:绝对需要设置宽度，而相对可以是动态的。