保持一個絕對定位的元素的寬度取決於其文本內容的首選寬度

我定位的元素只包含使用絕對位置（認爲工具提示）的另一個元素內的文本。保持一個絕對定位的元素的寬度取決於其文本內容的首選寬度

工具提示元素的寬度應根據其文本內容與一些最大寬度 - 有時它只是一個字，有時多行。
我需要能夠設置工具提示元素的左對齊位置並將其移動到包含框外。

這裏的標記：

<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; 
}

現在，只要我移動工具提示元素朝其容器的右邊緣它縮小以適應成容器。

下面是說明問題的交互式小提琴：http://jsfiddle.net/meyertee/GKFXN/

有一個純CSS方法，使工具提示元素右側表現爲它在左側 - 即讓本身一樣寬的文本將更喜歡成爲？

來源

2013-08-05 meyertee

我不確定，但我認爲這是不可能的，沒有設置最小寬度。也許這可能有所幫助：http://stackoverflow.com/questions/11890750/min-width-max-width-css-use-smallest-width –

使用CSS變換聲明：翻譯（X，Y），而不是左：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);

來源

2013-08-05 17:19:54

不錯，在OS X的Chrome 29/FF 22/Safari 6上測試過。我用px而不是％添加了小提琴：http://jsfiddle.net/meyertee/5vxHU/ – meyertee

解決方案有一個限制 - 由於它的工作方式我猜：如果容器太小，不能開始問題返回：http://jsfiddle.net/meyertee/7FMUK/幸運的是，這對我來說現在不是問題.. – meyertee

@meyertee - 在這一點上，你必須使用javascript/jquery在工具提示DIV上設置寬度。 –

很難明確回答，但不知道如何使用工具提示。

如果你wan't將其移動到盒子的外面，而不去框野，你可以使用的right: -10px代替left: ___px;

另一種方法是使用white-space: nowrap。這樣你可以使用left來定位，但它會迫使你手動添加換行符（我認爲這不是一個選項）。

最後，我認爲使用jQuery你已經知道答案。它可能是這樣的：

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

來源

2013-08-05 16:55:06

我編輯了我的問題，澄清我需要設置左側位置並移動它在盒子外面（如小提琴演示）..謝謝你。不幸的是nowrap不是一種選擇。 – meyertee

如何將工具提示最小寬度設置爲它的原始寬度與jQuery？

我只是說這給javascript：

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

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

來源

2013-08-05 17:06:04 mickadoo

也許把這個工具提示CSS。

.tooltip { 
    min-width: 150px; 
}

這裏是使用一個js另一個版本如果結果基本一致

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

來源

2013-08-05 17:10:17 thoggy

保持一個絕對定位的元素的寬度取決於其文本內容的首選寬度

回答

相關問題