包裝標籤內部的文本不起作用

Question

我在圖像上使用選項按鈕，並在每個圖像下面放置了文本。但是如果您在Fiddle的第一行看到第二張圖像，您可以看到由於名稱較長，圖像之間的間距比第二排上的要多。我怎樣才能換行，所以它垂直擴展。我試過word-break: break-word但不工作。

有人可以告訴如何解決它？

Answer 1

舉一個最大寬度屬性標籤

原因的話是不是包皮，因爲它不知道你想有多寬的標籤將它包裝

我加入之前最大-width樣例圖片：作爲一個例子

Answer 2

添加一個定義的寬度，所以div會推動文本，如果它確實說了。

label{ 
    float:left; 
    text-align:center; 
    word-break: break-word; 
    height:100px; 
    width:50px; 
    padding:15px; 
} 

你的CSS代碼應該是這個樣子，我都加了定義的寬度（而你也已經有了，只是不正確的評論），並填充給圖像一些空間。

Code Example

Answer 3

文本嵌套在widthless標籤標籤內。因此，文本有無限的空間來傳播。通過將寬度添加到標籤標籤來劃定您的文本。

label{ 
    width:70px; 
}