CSS - ограничение количества строк или символов

Question

CSS - ограничение количества строк или символов

0

я пытаюсь ограничить количество строк или каким-либо другим способом ограничить, как долго текст не подведет мой CSS,

я стараюсь:

#article-container p {
    padding: 0 10px 0 0;
    margin:0;
    display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;  
}

(это удаляет мои кнопки, чтобы "читать дальше" ниже статьи

Я также стараюсь, используя set max-height и display: блокировать и переполнять, но он перемещает другие элементы (статьи) далеко.

Но просто не знаю, как это исправить.

Весь код можно найти на FIDDLE

user3009924 27 апр. 2014, в 14:43

Источник

Теги:

html

css

2 ответа

Ещё вопросы

JohanVdR · Answer 1 · 2014-04-27T09-50-00.000Z

2

http://fiddle.jshell.net/TA78y/6/

#article-container p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 168px;
}

#article-container p.more {
    overflow: hidden;
    padding: 0;
    white-space: normal;
    width: auto;
}

JohanVdR 27 апр. 2014, в 09:50

0

Эй, приятель, спасибо за твой ответ, но, к сожалению, он не работает для меня, здесь можно посмотреть демоверсию сайта: funedit.com/andurit/try1
user3009924 27 апр. 2014, в 12:45
0

Он обрезает текст с помощью многоточия. Каким образом это не работает для вас?
JohanVdR 27 апр. 2014, в 12:48
0

если вы проверите мою ссылку, вы увидите, что она просто отодвинет все от своей позиции в article-container :)
user3009924 27 апр. 2014, в 12:50
0

Уменьшить ширину до ширины: 168 пикселей;
JohanVdR 27 апр. 2014, в 12:55
0

да, приятель, который работает, и palce снова в нужном месте, как я могу отредактировать, как строки manz отображать или что-то в этом роде, потому что сейчас у меня есть только 1 строка :)
user3009924 27 апр. 2014, в 13:06
0

funedit.com/andurit/try1 -> Демо на сайте
user3009924 27 апр. 2014, в 13:16
0

mobify.com/blog/multiline-ellipsis-in-pure-css
JohanVdR 27 апр. 2014, в 13:17

Показать ещё 5 комментариев

chandu · Answer 2 · 2014-04-27T10-12-00.000Z

Уменьшить значение # article-container p

#article-container p {
padding: 0 10px 0 0;
margin: 0;
width: 210px; //reduce the width
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

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