Question

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

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

这是标记：

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

这是CSS：

.container {
    position:relative;
    width:100%;
    height:100px;
}
.tooltip {
    position:absolute;
    top:0;
    left:0;
    max-width: 150px;
    padding: 20px;
}

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

这是一个互动的小提琴，说明了问题：http://jsfiddle.net/meyertee/GKFXN/

是否有一种纯粹的CSS方法可以使Tooltip元素在左侧表现得像在左侧那样 - 即使自己像文本所希望的那样宽？

Answer 1

如果不确切知道如何使用工具提示，很难明确回答。

如果你不想把它移到盒子的右边，没有盒子狂野，你可以使用right: -10px而不是left: ___px;

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

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

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

Answer 2

使用CSS变换：translate（x，y）而不是left：x。 http://jsfiddle.net/jYKrS/

$("#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);

Answer 3

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

我刚将其添加到javascript：

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

http://jsfiddle.net/meyertee/GKFXN/

Answer 4

也许把它放在工具提示CSS中。

.tooltip {
    min-width: 150px;
}

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

http://jsfiddle.net/GKFXN/56/

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

4 个答案: