2014-12-11 5 views
2

Есть ли способ получить эллипсис в конце третьей колонки (созданный column-count), если содержимое обрезается overflow: hidden;. Предпочтительный способ использования CSS. Что-то вроде:Как получить многоточие с типом столбца

data data data 
data data data 
data data data 
data data ... 

<ul style="list-style: none; -moz-column-count: 3; height: 5em; overflow: hidden; text-overflow: ellipsis;"> 
    <li>data</li> 
    <li>data</li> 
    <li>data</li> 
    <li>data</li> 
    <li>data</li> 
    <li>data</li> 
    <li>data</li> 
    <li>data</li> 
    <li>data</li> 
    <li>data</li> 
    <li>data</li> 
    <li>data</li> 
    <li>data</li> 
    <li>data</li> 
    <li>data</li> 
</ul> 

Demo

+0

Смотрите обновление. Это, как я ожидал, это должно сработать. –

+0

По какой причине вы не используете таблицу для своих табличных данных? – isherwood

+0

Это список ключевых слов, и мне нужно поместить его в три столбца в поле фиксированной ширины и высоты. Если количество ключевых слов выходит из границ, я хочу их скопировать и указать, что список неполный. –

ответ

3

Согласно docs для text-overflow вы не можете сделать это:

Это свойство влияет только содержание, которое переполняет контейнер элемента блока в инлайн направление прогрессии (например, текст , переполненный в нижней части окна).

Инлайн направление прогрессия следует читать как слева направо когда направление текста LTR.

Вот преданный, и не очень старые, статьи по теме: http://css-tricks.com/line-clampin/

+0

Вопрос в том, как сделать то же самое для non-inline progression. –

+0

@loshadvtapkah У меня вопрос. Я просто говорю, что ты не можешь. Не только с CSS, но не с текущим состоянием функций браузера. Вы можете пойти на решение JS или подождать еще несколько лет, пока браузеры не будут его реализовывать. –

+0

Обычно я не работаю с разметкой, поэтому я решил спросить, есть ли решение, с которым я не смог выполнить Google. С тех пор, как я работал с HTML и CSS, с тех пор не существует много решений JS. –

Смежные вопросы