空格: nowrap` rap`影响宽度

Question

我为文件上传者准备了一张桌子。文件名可能很长，因此在以下命令的帮助下仅显示名称的一部分：

overflow: hidden;
white-space: nowrap;

对于小名称，一切都可以正常工作(表格在引导面板边框内)，但对于大名称，我有以下内容：

​

在col-xs-*的帮助下，所有的<td>标签都有一定的比例，*值的总和是12。如果我注释white-space: nowrap;，页面将如下所示：

​

我已经检查了方框的大小，只有<td>的宽度受到影响，没有填充或边距变化。

为什么会这样，我怎样才能优雅地修复它呢？提前谢谢你。

​

.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 &amp; dropping or selecting them.</span>&nbsp;<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>

​

Answer 1

那是因为有了automatic table layout

格式化内容可以跨越任意数量的行，但不能溢出单元格框。

所以你可以通过使用固定的表格布局来解决这个问题。将以下样式添加到表框中：

table-layout: fixed;

问题是你的表格布局完全被display: block和float: left样式搞乱了。因此，您的table-cell被包装在一个匿名表中，您不能选择该表。

要么不要弄乱表格，要么添加一个display: table包装器。

.table-fixed tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

​

.table-fixed tbody {
  height: 200px;
  overflow-y: auto;
  width: 100%;
  float: left;
}
.table-fixed tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.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='panel panel-default'>
  <div class='panel-heading'>
    <input type='button' class='btn btn-danger' value='Abort'></input>
    <span class='help-block'><span translate>Upload files by dragging &amp; dropping or selecting them.</span>&nbsp;<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>
            <fa name="trash" alt="delete" style="color: #FF4136"></fa>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

​

Answer 2

您必须传递td的宽度

.file-name {
  overflow: hidden;
  white-space: nowrap;
 width:300px
}