`white-space: nowrap` 影响宽度。

Question

`white-space: nowrap` 影响宽度。

15

我有一个文件上传器的表格。文件名可能很长，所以只显示名称的一部分，方法如下：

overflow: hidden;
white-space: nowrap;

一切对于小名称都正常工作（表格在 Bootstrap 面板边框内），但对于大名称，我有这个问题：

所有的标签都使用 col-xs-* 的帮助来保持比例，* 的总和为 12。如果我注释掉 white-space: nowrap; ，页面会变成这样：

我已经检查过盒子的大小，只有的宽度受到影响，没有填充或边距的更改。

为什么会这样，如何优雅地解决？谢谢您的提前回答。

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

- Georgy

你期望什么？如果你防止换行并且内容足够宽，它们将会溢出。 - Oriol

4

这就是为什么我指定了 overflow: hidden。期望的行为是：使用 col-xs-6 的宽度，不超过这个宽度，不要打破表格。不幸的是，表格变得更宽了。 - Georgy

2个回答

-1

你必须传递 td 的宽度

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

- krishna

那将使宽度固定，我尝试使用col-xs-*因此它可以根据页面宽度改变。 - Georgy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oriol · Accepted Answer

那是因为使用自动表格布局,格式化内容可能跨越多行，但不会溢出单元格框。所以您可以改用固定表格布局来解决此问题。将以下样式添加到表格框中：

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>