Не удается получить "переполнение текста: многоточие"; работать

Я не могу получить "text-overflow: ellipsis;" работать... Может быть, кто-то может помочь с этим: -)

Небольшой пример: http://jsfiddle.net/qKS8p/2/

http разметка:

<table class="" border="1">
    <tr><td colspan=3>…</td></tr>
    <tr class="">
        <td width="90"><span class="prose">column one</span></td>
        <td width="20"><span class="prose">column two</span></td>
        <td width="90"><span class="prose">column three</span></td>
    </tr>
    <tr><td colspan=3>…</td></tr>
</table>

Правила стиля CSS:

.prose {
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

Я бы ожидал, что "столбец два" будет измельчен из-за ширины td 20 пикселей. Я также пробовал разные варианты с divs, tds и т.д., Но я не вижу никаких изменений. Обратите внимание, что это не работает в любом браузере, который я проверил. Так что, конечно же, я скучаю.

Есть миллионы страниц о примерах, различиях браузера и т.д. Но я не могу заставить это работать! Согласно текущей информации, во всех основных браузерах поддерживается простой атрибут переполнения текста. Поэтому я ищу чистое решение css (а не xul, а не jquery plugin), так как это должно работать.

Спасибо, arkascha

Ответы

Ответ 1

Проблема с кодом в примере состоит в том, что таблицы автоматически увеличивают и игнорируют заданную ширину 20 пикселей, если там больше контента, чем 20px. Вот пример, который работает: http://jsfiddle.net/qKS8p/34/

Я добавил:

span {
  display:block;
  width:inherit;
}

Ответ 2

Эта скрипка работает для меня: http://jsfiddle.net/wRruP/3/

HTML

<div><span>column one</span></div>
<div>column two</div>
<div><p>column three</p></div>

### CSS

div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 40px;
}

Кажется, что text-overflow должен быть установлен в блоке, который фактически ограничивает ширину текста. <span> - это встроенный элемент, который на самом деле не имеет ширины и, следовательно, не может обрезать текст, и когда я вложил <p>, он не наследовал свойство.

Ответ 3

Попробуйте установить как свойство text-overflow, так и фиксированную ширину на одном и том же элементе уровня блока (например, div), как это:

<table class="" border="1">
    <tr><td colspan=3>…</td></tr>
    <tr class="">
        <td><div class="prose" style="width: 90px">column one</div></td>
        <td><div class="prose" style="width: 20px">column two</div></td>
        <td><div class="prose" style="width: 90px">column three</div></td>
    </tr>
    <tr><td colspan=3>…</td></tr>
</table>

С вашим оригинальным CSS:

.prose {
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}