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

debugcn 发表于 Dev

堆栈显示

我有一个3列固定的左右布局，中间布局如下所示。它可以像目前一样完美运行。但是，如果我向其中添加一个截断类，则中间div宽度将在父宽度上扩展。

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

添加截断类之前的Plunkr：单击此处

如果替换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>

预期样品：

桑索什·库玛（Santhosh Kumar）

我已经编辑了您的代码以实现相同的目的。

<div class="three-column-wrapper">
  <div class="left">
    Left
  </div>
  <div class="middle">
    <div class="truncate">This is a very long text that should be truncate This is a verry very long text that should be truncated</div>
    <div class="truncate">This is a verry very long text that should be truncated</div>
  </div>
  <div class="right">
    123
  </div>
</div>

    .three-column-wrapper {
    width: 100%;
    height: 50px;
    display: table;
    padding: 0;
    margin: 0;
    table-layout: fixed;
}
.left {
    width: 40px;
}

.left, .middle, .right {
    display: table-cell;
    vertical-align: middle;
}
.middle {
    background: red;
}
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.right {
    width: 40px;
    text-align: center;
}

我已将table-layout：fixed添加到父级，以确保子级div共享相等的宽度（如果未提及宽度）。而且，如果提到宽度，它也不会包装。然后，我在截断类中增加了宽度。请注意，没有提及宽度，省略号将不起作用。请参考这里

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。