我有一个文件上传器的表格。文件名可能很长,所以只显示名称的一部分,方法如下:
overflow: hidden;
white-space: nowrap;
一切对于小名称都正常工作(表格在 Bootstrap 面板边框内),但对于大名称,我有这个问题:![With white-space: nowrap](https://istack.dev59.com/QmfTN.webp)
![With white-space:wrap commented out](https://istack.dev59.com/CMTkf.webp)
为什么会这样,如何优雅地解决?谢谢您的提前回答。
.table-fixed tbody {
height: 200px;
overflow-y: auto;
width: 100%;
float: left;
}
.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
display: block;
}
.table-fixed tbody td,
.table-fixed thead > tr> th {
float: left;
border-bottom: none;
max-height: 40px;
min-height: 40px;
}
.file-name {
overflow: hidden;
white-space: nowrap;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class='col-xs-10 col-xs-offset-1'>
<div class='panel panel-default'>
<div class='panel-heading'>
<span class='help-block'><span translate>Upload files by dragging & dropping or selecting them.</span> <a>Browse to select</a>
</span>
</div>
<table class="table table-fixed">
<tbody>
<tr ng-repeat='f in files'>
<td class='col-xs-6 file-name'>Long name Long name Long name Long name Long name Long name Long name Long name Long name Long name Long name Long name Long name </td>
<td class='col-xs-5'>
<div class='progress'>
<div class='progress-bar' role='progressbar' aria-valuemin='0' aria-valuemax='100' style='width:50%'></div>
<span class="percents">50%</span>
</div>
</td>
<td class='col-xs-1'>
<a href>X</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
overflow: hidden
。期望的行为是:使用col-xs-6
的宽度,不超过这个宽度,不要打破表格。不幸的是,表格变得更宽了。 - Georgy