我使用绝对位置将包含文本的元素定位在另一个元素中(想想工具提示)。
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元素在左侧表现得像在左侧那样 - 即使自己像文本所希望的那样宽?
答案 0 :(得分:1)
如果不确切知道如何使用工具提示,很难明确回答。
如果你不想把它移到盒子的右边,没有盒子狂野,你可以使用right: -10px
而不是left: ___px;
另一种方法是使用white-space: nowrap
。这样你可以使用left
定位,但它会强制你手动添加换行符(我认为这不是一个选项)。
最后,我认为使用jQuery你已经知道了答案。它可能是这样的:
$.each(".tooltip", function() { // Or on display
$(this).css("min-width", $(this).width());
});
答案 1 :(得分:1)
使用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);
答案 2 :(得分:0)
如何使用jQuery将工具提示最小宽度设置为原始宽度?
我刚将其添加到javascript:
$('.tooltip').css('min-width',$('.tooltip').width());
答案 3 :(得分:0)
也许把它放在工具提示CSS中。
.tooltip {
min-width: 150px;
}
这是另一个版本,它使用js if语句来获得基本相同的结果