Многоточие с детьми DIV

Question

У меня есть следующий HTML, который также привязан к загрузочном пирог (если это делает никакой разницы)

<div class="event" style="top: 0%; width: 100%;"> 
    <span class="test">Layouts</span> 
    <div class="value"> 
    test 
    </div> 

    <span class="test">Starts</span> 
    <div class="value">2014/12/12, 11:00</div> 

    <span class="test">Ends</span> 
    <div class="value">2015/1/16, 00:00</div> 
</div> 

с ассоциированной СКС:

& > div.event { 
     // position: absolute; 
     white-space: nowrap; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     background-color: rgba(41, 128, 185,.7); 
     outline: 1px solid rgba(155, 89, 182,1.0); 
     min-height: 30px; 
     color: white; 
     // width: 100%; 
     height: 30px; 
     padding: 5px; 
     z-index: 1; 

     font-size: 0.7em; 
     .test { 
      white-space: nowrap; 
      overflow: hidden; 
      text-overflow: ellipsis; 
      float:left; 
      // text-transform: uppercase; 
      font-weight: 200; 
      padding: 0; 
     } 

     .value { 
      white-space: nowrap; 
      overflow: hidden; 
      text-overflow: ellipsis; 
      float:left; 
      color: rgba(255,255,255,0.5); 
      margin-bottom: 5px; 

      i.fa-external-link { 
      cursor: pointer; 
      line-height: 23px; 
      } 
     } 
     .value, .test { 
      padding-right: 5px; 
     } 

Моя проблема заключается в том, что, когда Я сокращаю контейнер «.event» (скажем, до 5%), текст усекается, и я хотел бы отображать его как многоточие. Из того, что я прочитал, у ключа действительно есть переполнение: скрытое с белым пространством: nowrap, а также набор переполнения текста. Я жонглировал, перемещая их на разные элементы, но ничего не работает. Я делаю что-то явно неправильно? Я могу опубликовать больше html и css, если окажется, что проблема лежит на более высоком уровне.

Fiddle показать проблему: http://jsfiddle.net/q1go1471/2/

Answer 1

Насколько я знаю, вы должны указать ширину для изготовления text-overflow: ellipsis работ.

Просто изменить это, и это должно работать:

.value, .test { 
    padding-right: 5px; 
    width: 30px; 
} 

JSFiddle: http://jsfiddle.net/Ljo2eco9/

EDIT:

Чтобы создать только 1 многоточие в конце концов, использовать display: inline; вместо float: left в вашем дети.

.test { 
    font-weight: 200; 
    padding: 0; 
} 

.value { 
    color: rgba(255,255,255,0.5); 
    margin-bottom: 5px; 
} 

.value, .test { 
    padding-right: 5px; 
    display: inline; 
} 

JSFiddle: http://jsfiddle.net/Ljo2eco9/1/