CSS Text-overflow Многоточие не отображается

У меня есть div с некоторым внутренним содержимым, которое мне нужно, чтобы иметь многоточие, когда оно переполняется. Я делал это много раз на других элементах, но по какой-то причине это не работает так, как ожидалось.

Кроме того, я специально оставил white-space:nowrap;, потому что тогда содержимое не переходит на следующую строку в диапазоне, в результате я вижу только 2-3 слова перед многоточием. начинается.Я хотел бы, чтобы текст охватывал всю высоту родительского контейнера, а затем многоточие начиналось для контента, который существует за этими пределами.

Вот рабочая демонстрация: http://jsfiddle.net/sadmicrowave/DhkSA/

CSS:

.flow-element{
     position:absolute;
     font-size:12px;
     text-align:center;
     width:75px;
     height:75px;
     line-height:70px;
     border:1px solid #ccc;
}

.flow-element .inner{
     position:absolute;
     width:80%;
     height:80%;
     border:1px solid blue;
     top:0px;
     bottom:0px;
     left:0px;
     right:0px;
     margin:auto;
     text-align:center;
}

.flow-element .long{
     float:left;
     height:50px;
     width:100%;
     line-height:12px;
     border:1px solid red;  
     text-overflow:ellipsis;
     overflow:hidden;
}

HTML:

  

     Box 1 and some other content that should wrap and do some other stuff
  

Может кто-нибудь помочь. Мне нужно отобразить как можно больше текста в пределах диапазона, обведенного красным, с многоточием, когда текстовое содержимое переполняет контейнер...

Заранее спасибо