使一个单元格或 div 缩小以为其他单元格或 div 腾出空间答案

【问题标题】：make one cell or div shrink to give room for others使一个单元格或 div 缩小以为其他单元格或 div 腾出空间
【发布时间】：2011-01-18 05:16:21
【问题描述】：

我有一行单元格（或 div）：

cell1
cell2
cell3
cell4

我希望 cell1、cell2 和 cell4 始终显示它们的所有数据（但也要缩小以适应），如果行上没有足够的空间，我希望 cell2 剪裁其数据以防止包装线。

我还希望 cell4 与行的右侧对齐。

cell1   cell2          cell3                             cell4

data    clipped data   data                              data

想法？

【问题讨论】：

我知道你的意思是 HTML，但请编辑你的问题，让每个人都知道

标签： html word-wrap clipping cells

【解决方案1】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>                                                                                                       
<head>                                                                                                       
<style type="text/css">                                                                                      

#example {
  width: 800px;
  border: 2px solid yellow;
}                          

.cell1 { border:1px solid red;
  vertical-align:top;         
  text-align:left;            
  word-wrap:break-word;
  width:100px;
}
.cell2 { border:1px solid green;
  vertical-align:top;
  text-align:left;
  width:100px;
  display:block;
  overflow:hidden;
}
.cell3 { border:1px solid blue;
  vertical-align:top;
  text-align:left;
  word-wrap:break-word;
  width:300px;
}
.cell4 { border:1px solid silver;
  vertical-align:top;
  text-align:right;
  word-wrap:break-word;
  width:300px;
}
.odd {}
.even {}

</style>
<body>

<table id="example">
<colgroup>
<col></col><col></col><col></col><col></col>
</colgroup>
<thead>
<tr><th>cell1</th><th>cell2</th><th>cell3</th><th>cell4</th></tr>
</thead>
<tr class="odd">
<td class="cell1">
1234 2345 3456 4567
</td>
<td class="cell2">
clip123clip123clip123clip123clip123clip123
</td>
<td class="cell3">
asdf asdf asdf sdfg
</td>
<td class="cell4">
sdfg sdfg sdfg sdfg sdfg sdfg sdfg
</td>
</tr>
</table>


</body>
</html>

【讨论】：

请注意，您可以从表格和单元格 1、2、4 中删除宽度，以使“收缩”部分正常工作。在示例中忘记了。