Эллипсис с текстовым переполнением CSS не отображается

У меня есть 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:

<a class='flow-element' style='top:100px; left:50px;'>
  <div class='inner'>
     <span class='long'>Box 1 and some other content that should wrap and do some other stuff</span>
  </div>
</a>

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

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

Ответы

white-space:nowrap;