包裝div寬度的內容，但也包裝內容在某一點

Question

也許這是要求有我的蛋糕和吃它，但我認爲我接近解決方案，只需要一點幫助。我做了相當多的搜索，但一直沒有找到我正在尋找的東西。

我正在創建一個可點擊的圖標來激活頁面上的一些JavaScript。可以有多個圖標，圖標上的文字由用戶提供。我將圖標包裝爲55px，這將使文本正確地進入一個新行，但是如果有一個單詞超過55px，它將跳出包含div。

我的相關代碼的樣機

HTML：

<div class="outer"> 
    <div class="inner"> 
     <a> 
      <img src="chronometer.png" height=32px width=32px /> 
      <div class="text">Superawesomethingymabob</div> 
     </a> 
    </div> 
</div> 

CSS：

div.outer { 
    border: 1px solid blue; 
    background-color: cyan; 
    float:left; 
    text-align: center; 
} 
div.inner { 
    border: 1px solid red; 
    width:55px; 
} 
div.text { 
    background-color:yellow; 
    width:auto; 
} 
a { 
    display:inline-block; 
} 

所以基本上我在做什麼是我有一個內部的div具有固定寬度，所以文字將包裹。外部div向左浮動，因此它會收縮包裝成其內容。問題是，外部div將收縮包裝到內部div的寬度，而不是內部div的突破文本的寬度。

任何幫助或建議，將不勝感激，並獎勵500個互聯網。我在標記或CSS上很靈活，我只想要一些跨瀏覽器兼容的東西。

在此先感謝。

Answer 1

我無法找到一個CSS解決我的問題，所以這是我的JavaScript的解決方案：

/** 
* Adjust the widths of each icon div to be as wide as the longest unbroken word 
*/ 
function adjustIconWidths() { 
    $("div.icon").each(function(){ 

    var width = $(this).width(); 
    var starting = width; 
    $("span",this).each(function(){ 
     var tmp = $(this).width(); 
     if(tmp > width){ 
      width = tmp; 
     } 
    }) 
    if(width != starting){ 
     $(this).width(width); 
    } 

    }); 
} 

Answer 2

使用word-wrap: break-word

Answer 3

埃裏克提出什麼「斷字」的嘗試是好的，但它不是跨瀏覽器兼容。

統計上大部分使用的單詞少於14個字符。因此，即使瀏覽器不符合「分詞」屬性，通常我所做的設計保持良好，即選擇在可用空間中顯示14個字符的字體大小。並使用屬性「overflow：hidden」來隱藏超過14個字符的單詞中的多餘字符。

另一種不被推薦和不乾淨的方法是在JS中創建一個函數，通過在長度超過14個字符的單詞中添加空格來渲染單詞。