Overflow hidden для table-cell

247

19 апреля 2017, 10:53

Добрый день!
Есть родительский класс который определен как display: table, в нем два дочерних, в первом может меняться количество символов, необходимо делать overflow hidden и text-overflow: ellipsis, для родительского блока.
Во втором надо сделать чтоб его ширина заполняла все оставшееся пространство родительского блока, и если его нету, то прятать ячейку.
Частично это реализовано. Нужна помощь с большим количеством символов в первом дочернем блоке.

 .container { 
    display: block; 
    width: 300px; 
} 
 
.parent { 
    width: 85%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    display: table; 
} 
 
.first_child { 
    display: table-cell; 
} 
 
.second_child { 
    display: table-cell; 
    width: 100%; 
}

<section class="container"> 
 <div class="parent"> 
  <span class="first_child">Много текста</span> 
  <span class="second_child" title="title">*</span> 
</div>