CSS：在HTML表格中，自動換行不適用於float：left

我有一個三列表格，我想根據內容的長度在單元格中設置文本背景。但是當我設置float：left時，單詞換行不起作用。CSS：在HTML表格中，自動換行不適用於float：left

table { 
table-layout: fixed; 
width: 100%; 
word-wrap: break-word; 
}

這是每個單元格中的內容。

.read{ 
    min-height: 20px; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    margin-left: 10px; 
    padding: 0px 10px 0px 10px; 
    border-radius: 4px; 
    background-image: -webkit-gradient(linear, 25% 0%, 25% 100%, from(rgba(142, 175, 196, 1.0)), to(rgba(118, 146, 164, 1.0))); 
    float:left; 
} 

<table> 
    <tr> 
     <td width="36px">..</td> 
     <td> 
      <div class="read"> 
      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooog 
      </div> 
     </td> 
    </tr> 
</table>

如果我刪除float：left ;,背景將不匹配內容的長度，但文字換行確實有效。我該如何修改我的CSS？

來源

2012-07-27 Tim Fan

你可以嘗試添加顯示：inline-block;到你的.read類？ – ppp 2012-07-27 09:44:59

分享您的標記請 – 2012-07-27 09:45:27

http://stackoverflow.com/questions/5889508/using-word-wrap-break-word-within-a-table – Prashobh 2012-07-27 09:48:40

add display：inline;

.read{ 
     min-height: 20px; 
     margin-top: 10px; 
     margin-bottom: 10px; 
     margin-left: 10px; 
     padding: 0px 10px 0px 10px; 
     border-radius: 4px; 
     background-image: -webkit-gradient(linear, 25% 0%, 25% 100%, from(rgba(142, 175, 196, 1.0)), to(rgba(118, 146, 164, 1.0))); 
     **display:inline;** 
    }

來源

2012-07-27 10:28:09 priyanka77

是的，這使內容換行，但背景逐行顯示在內容後面，而不是整個塊。我試圖解決這個問題..謝謝你！ – 2012-07-30 02:43:35

嗯我很感興趣，爲什麼這個作品。據我記得，內聯元素需要設置寬度才能自動換行？ – lulalala 2015-07-15 03:12:57

CSS：在HTML表格中，自動換行不適用於float：left

回答

相關問題