Не удается получить «переполнение текста: многоточие;» работать - PullRequest
Новая
       23

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

17 голосов
/ 04 марта 2012

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

Небольшой пример: 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 плагин), так как это должно работать.

Спасибо, Аркаша

Ответы [ 3 ]

31 голосов
/ 04 марта 2012

Эта скрипка у меня работает: 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>, он не наследовал это свойство.

15 голосов
/ 04 марта 2012

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

Я добавил: 

span {
  display:block;
  width:inherit;
}
4 голосов
/ 04 марта 2012

Попробуйте установить свойство 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;
}
...