我有一个三列表格,我想根据内容的长度在单元格中设置文本背景。但是当我设置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?
你可以尝试添加显示: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