Переполнение текста в многоточии CSS не отображается

Question

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

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

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

Answer 1

Вы не можете применить text-overflow: ellipsis к встроенным элементам (span), его можно использовать только с блочными элементами (div)

, а также используйте white-space:nowrap; при использовании text-overflow: ellipsis;

отметьте это, я преобразовал ваш внутренний диапазон в div, просто для подтверждения концепции

http://jsfiddle.net/3CgcH/5/

Я не знаю, почему вы использовали span, но согласно вашей логике вы можете вносить изменения, как я и предлагал

Обновление:

кто-то подумает, что в вопросе, если я добавлю white-space: nowrap; к элементу span, тогда text-overflow: ellipsis: работает, так что, возможно, я ошибаюсь, но это не так, потому что спрашивающий использовал float: left в теге span это означает, что тег span будет преобразован в блочный блок и будет работать как обычный элемент уровня блока, что также неправильно, потому что если вам нужно поведение элемента block, тогда используйте элемент уровня блока

Справка:

http://www.w3.org/TR/CSS2/visuren.html#propdef-float

http://dev.w3.org/csswg/css3-ui/#text-overflow

Answer 2

Я думаю, вы обнаружите, что проблема вызвана наличием text-align: center;

Answer 3

Добавить это:

white-space:nowrap;

в .flow-элемент .long

тогда переполнение-эллипсис работает.

Answer 4

Добавьте white-space:nowrap; к вашему .inner div.