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

发布于 2024-08-22 18:21:17 字数 351 浏览 11 评论 0原文

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

cell1
cell2
cell3
cell4

我希望 cell1 cell2 和 cell4 始终显示其所有数据（但也缩小以适应），如果该行没有足够的空间，我希望 cell2 剪辑其数据以防止线路缠绕。

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

cell1   cell2          cell3                             cell4

data    clipped data   data                              data

想法？

原文

I have a line of cells (or divs):

cell1
cell2
cell3
cell4

I want cell1 cell2 and cell4 to always show all their data (but also to shrink to fit), and if there is not enough room on the line, i want cell2 to clip its data in order to prevent a wrapping of the line.

I also would like cell4 to align to the right of the row.

cell1   cell2          cell3                             cell4

data    clipped data   data                              data

ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

就像说晚安 2024-08-29 18:21:17

<!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>

<!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>

回复收藏 0 原文

~没有更多了~