CSS寬度/最大寬度在線包裝？

#tooltip 
{ 
    position: absolute; 
    width:auto; 
    min-width:50px; 
    max-width:250px; 
    padding:10px; 
    background-color:#eee; 
    border:1px solid #aaa; 
}

基於這種風格，我希望我的工具提示縮小或增長以適應內容，可以降至50px或最大250px。但是，當內容換行到下一行時，max-width屬性似乎超過了我的寬度屬性。當句子末尾的單詞很長時，它看起來像留下了一堆填充（參見截圖），這是一種美學方面的東西。這是正常的行爲嗎？CSS寬度/最大寬度在線包裝？

enter image description here

來源

2012-09-11 Sam

是的，這是正常的行爲。

瀏覽器將嘗試在文本框內嵌入文本，直到達到其最大允許寬度爲250px，然後將不能放在第一行的文本換行到下一行和後續行。（如果沒有足夠的文本達到最大寬度，那麼width: auto會導致文本框縮小以適合該文本量。）

但是，包裝後的文本框不會再縮小以適應文本，因爲文本包裝只是不這樣工作。這意味着該框的width計算爲250px，而僅限於，因爲您的CSS規定最多隻能爲250px。它不會被計算爲一個較小的值，該值等於文本的寬度，然後被覆蓋max-width。

我不認爲有任何事情可以改變這種行爲。

來源

2012-09-11 21:03:14 BoltClock

感謝您的確認！無法在其他地方找到答案。 – Sam

可能沒有任何方法可以用CSS來改變這種行爲，但可以用JS完成。 http://stackoverflow.com/q/33244477/3597276 –

我不太明白。 '使箱子縮小以適應這麼多的文本'或者'箱子在包裝後不會再縮小以適應文本'？兩者都不是真的。你的答案的第二段和第三段似乎與我相矛盾。 –

嘗試使用這一個：

width: max-content; 
width: min-content; 
width: available; 
width: fit-content;

他們是不是100％兼容，但前綴解決這個問題或多或少。

來源：https://developer.mozilla.org/ru/docs/Web/CSS/width

來源

2017-10-12 08:37:06

CSS寬度/最大寬度在線包裝？

回答

相關問題