如何增加一個span標記的寬度的李

Question

裏面我有一個ul結構如下

<ul> 
    <li> text goes here <span></span> </li> 
    <li> text goes here <span></span> </li> 
</ul> 

現在最初的跨度標籤是空的。我試圖使用jQuery .html()函數將數字添加到span標記中，但是在Chrome中，文本會被截斷。奇怪的是，當我使用web檢查器並單擊li時，span標籤的寬度根據內容和li而增加。

任何想法？

的CSS是如下

li{ 
    list-style:none; 
    float:left; 
    padding: 0 5px; 
} 

span{ 
    display:inline-block; 
    min-width:5px; 
    min-height:5px; 
} 

Answer 1

你不能寬度。 span是一個inline元素，要麼將其顯示屬性設置爲inline-block或block以設置其尺寸，要麼使用block元素代替span。

white-space: nowrap; // will force it not to wrap around 

請看這個小提琴的效果：http://jsfiddle.net/Abp8y/11/ [已更新]。

上次診斷：text-transform在li標籤中發現的錯誤。刪除text-transform解決了這個問題。

的Chrome有錯誤，也是在這裏討論：text-transform: uppercase causes layout error on Chrome張貼由@Christoph

Answer 2

使用可以試試這個和修復的翼展

span{ 
    word-wrap:break-word; 
}