截取文本到表格单元格内的流体div的省略号

Question

我有一个3列修复左右布局，中间布局如下液体。它目前完美的工作。但是，如果我向它添加一个截断类，中间的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

我编辑了自己的代码来实现相同的。

<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; 
} 

我已添加表格布局：固定到父级，以确保子级别共享等宽度，如果没有提到宽度。如果提到宽度，它也不会包装。然后我将宽度添加到截断类。请注意，如果没有提到宽度，省略号将不起作用。参考here

Answer 2

使用下面这个CSS，它可以帮助你......

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