使div大小恰好爲文本寬度？

我正在嘗試將一個圖標保留在具有換行符的液體文本容器上。使div大小恰好爲文本寬度？

問題是，當換行符斷開時，文本結束前和換行符結束處有一個很大的間隔。這使得我的浮動元素開始在間隙結束的地方。

有沒有辦法讓div只有它的內容大小？

選中此codepen：https://jsfiddle.net/e38edtdy/1/ 調整輸出區域以查看空間的差距。該按鈕會自動調整大小以查看差距。

*{ 
padding:0; 
margin:0; 
top:0; 
left:0; 
    } 
#mainContainer{ 
width:100%; 
     border:black solid thin; 
} 

#lt{ 
color: black; 
background-color:gray; 
tex-align:left; 
max-width:90%; 
float:left; 

} 
#icon{ 
width:20px; 
height:20px; 
background-color:blue; 
float:left; 
} 

<body > 

    <div id='mainContainer'> 
    <div id='lt'>This is The information This is The information This is The information</div> 
    <div id='icon'></div> 

    </div> 
    <br/> 
    <input type='button' onClick='showBadSize()' value="click to auto resize to show gap" style='margin-top:20px;float:left; clear:left' /> 
</body>

來源

2017-08-15 user1088963

一個元素不知道什麼時候它的內容包裝，所以要解決這個問題你需要一個腳本 – LGSon

@LGSon所以沒有css解決方案來實現我的目標？你能否提供鏈接到確切的重複？ – user1088963

不，沒有CSS解決方案，並且重複的鏈接位於您的問題的頂部 – LGSon

另一種方法可能是將hyphens: auto放在文本容器上，以便更好地使文本斷開。 Firefox還需要語言屬性，例如lang='en-US'。

來源

2017-08-15 10:05:27 HertzaHaeon

我們不回答與另一個答案的鏈接，我們投票結束重複。另外做我所做的，添加一個建議的評論 – LGSon

使div大小恰好爲文本寬度？

回答

相關問題