Html 保持绝对定位元素'；s宽度取决于其文本内容'；s首选宽度

我使用绝对位置（想想工具提示）将只包含文本的元素放置在另一个元素中

工具提示元素的宽度应根据其文本内容确定，并具有一定的最大宽度-有时它只是一个单词，有时是多行。
我需要能够设置工具提示元素的左对齐位置，并将其移出包含框

以下是标记：

<div class="container">
    <div class="tooltip">Sed venenatis diam ligula, at sagittis arcu blandit in.</div>
</div>

现在，只要我将工具提示元素移向其容器的右边缘，它就会收缩以适合该容器

下面是一个互动小提琴，说明了这个问题：

---

是否有一种纯粹的CSS方法可以使工具提示元素在右侧的行为与在左侧的行为相同，即使其自身的宽度与文本所希望的宽度相同？

如果不确切知道如何使用工具提示，很难清楚地回答

如果您不想将其移动到框外的右侧，而不让框失控，则可以使用

right:-10px

而不是

left:\uuuuupx

另一种方法是使用
空白：nowrap
。这样，您可以使用
left
定位，但它会强制您手动添加换行符（我认为这不是一个选项）

最后，我认为使用jQuery您已经知道答案了。可能是这样的：

$.each(".tooltip", function() { // Or on display
    $(this).css("min-width", $(this).width());
});

使用jQuery将工具提示最小宽度设置为其原始宽度如何

我刚刚在javascript中添加了以下内容：

$('.tooltip').css('min-width',$('.tooltip').width());

可能会将其放在工具提示CSS中

.tooltip {
    min-width: 150px;
}

下面是另一个版本，它使用js if语句获得基本相同的结果

使用CSS transform:translate（x，y）而不是left:x

为了更好的兼容性，您可能必须添加所有带前缀的版本

transform: translate(x, y);
-webkit-transform: translate(x, y);
-moz-transform: translate(x, y);
-ms-transform: translate(x, y);
-o-transform: translate(x, y);

我不确定，但我认为如果不设置最小宽度，这是不可能的。也许这会有帮助：很好，在OS X上的Chrome 29/FF 22/Safari 6上测试了它。我添加了一个px而不是%：解决方案有一个局限性-由于它的工作方式，我猜：如果容器太小而无法开始，问题返回：幸运的是，现在这对我来说不是问题。@meyertee-此时您必须使用javascript/jquery来设置宽度应该注意的是，这个脚本并没有真正回答这个问题：“是否有一个纯CSS方式[…]”@AlejandroIván-事实上是这样的，虽然示例使用JavaScript滑块，但您可以简单地将提供的CSS转换附加到：target或：hover选择器。提供的JavaScript只是为了方便演示，没有必要。我编辑了我的问题，澄清了我需要设置左侧位置并将其移到框外（如小提琴中所示）。。还是谢谢你。不幸的是，nowrap不是一个选项。
$("#positionSlider").slider({
    value: 0,
    min: 0,
    max: 150,
    step: 1,
    slide: function (event, ui) {
        $(".tooltip").css("transform", "translate(" + ui.value + "%, 0)");
    }
});

transform: translate(x, y);
-webkit-transform: translate(x, y);
-moz-transform: translate(x, y);
-ms-transform: translate(x, y);
-o-transform: translate(x, y);