将文本截断为表格单元格内的流体div中的省略号

Question

我有一个3列固定左右布局，中间布局如下所示。它目前运作完美。但是，如果我向其添加truncate类，则中间div宽度将扩展到父宽度。

所以，我的问题是：如何截断流体布局中的文本并将截断的文本固定在流体布局宽度内。请注意，我不希望硬编码中间div宽度。

添加截断类之前的Plunkr：Click here

如果将div class=middle替换为此内容，则无法截断文本。

<div class="middle">
        <div class="truncate">This is a very long text that should be truncate</div>
        <div class="truncate">This is a verry very long text that should be truncated</div>
      </div>

预期样本：

Answer 1

使用下面的css，它可以帮助你...

.middle div {
 display: -webkit-box;
 -webkit-line-clamp: 1;
 -webkit-box-orient: vertical;
 font-size :35px;
 overflow: hidden;
}

Answer 2

我已经编辑了你的代码以达到同样的目的。

2016-05-16
2016-05-16
2016-05-30
2016-06-06

我添加了table-layout：固定到父级，以确保如果没有提到宽度，子div共享相等的宽度。如果提到宽度，它也不会包裹。然后我为truncate类添加了宽度。请注意，如果没有提到宽度，省略号将无法工作。请参阅here

Answer 3

解决方案在这里，玩得开心。

.table{
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    border-collapse: collapse;
}


.table td, .table th {
    padding: .75rem;
    vertical-align: top;
    border: 1px solid #ccc;
    position:relative;
}

.table td > .text-tuncate, .table th > .text-tuncate{
  position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: inherit;
}

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th>3</th>
      <td><span class="text-tuncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent venenatis feugiat mi, id bibendum tellus. </span></td>
      <td><span class="text-tuncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent venenatis feugiat mi, id bibendum tellus. </span></td>
      <td><span class="text-tuncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent venenatis feugiat mi, id bibendum tellus. </span></td>
    </tr>
  </tbody>
</table>