Как сократить количество отображаемых строк в css?

Question

[Screamin-Jay]

Необходимо, чтобы блок .description отображался в 2 строчки, а не в 3 и больше, как сейчас. Уменьшать размеры шрифта, увеличивать блок не по макету.

Т.е .description задать высоту в 2 строчки вне зависимости от количества содержимого в нем.

jsfiddle.net/42G2n

Answer 1

[Игорь Воротнёв]

Фиксированная высота + overflow: hidden. Это костыль, но поскольку вы не брезгуете magic numbers, то вполне сгодится.

По уму - html5hub.com/ellipse-my-text/#i.ynjfrd17pscqpw

Comments

[Andrello]

magic numbers это ты про
font-weight: 700;
margin: -3px 0 10px; ? )

[Игорь Воротнёв]

Про margin)) С font-weight все ок

[Andrello]

да это же bold!!!

[Screamin-Jay]

@HeadOnFire pixelperfect вот откуда такие странные циферки.

[Игорь Воротнёв]

@Screamin-Jay, неа. Якобы пиксельперфект дизайн не учитывает среду и на самом деле кривой. Дизайнеру по рукам бить. Если в цсс приходится юзать подобные хаки (которые никогда не работают на 100%) значит или трабла с версткой (недостаточное понимание box model и лейаутов), или с дизайном. Третьего не дано.

[Screamin-Jay]

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

[Игорь Воротнёв]

Скину, не вопрос. Как до компа доберусь.

[Screamin-Jay]

@HeadOnFire Большое спасибо.

[Flasher]

@HeadOnFire text-overflow:ellipsis работает для текста в одну строку

[Игорь Воротнёв]

@Flasher советую внимательно изучить статью по ссылке, там есть решение для multiline

Answer 2

[Krickt]

Я что-то не понимаю? Почему у меня 2 строчки в описании?

Comments

[Игорь Воротнёв]

В данном примере 2 строчки, но может быть и больше. Например, если увеличить шрифт.

[Screamin-Jay]

Возможно вы изменили шрифт с 20, в любом случае FF отображает в 2 строчки, может в браузере дело?

[Игорь Воротнёв]

@Screamin-Jay а вы на размер шрифта не надейтесь никогда. Минимум у 20% юзеров он будет отличаться от вашего, гарантированно.

[Screamin-Jay]

@HeadOnFire В чем причина и как это приручить? В дополнении к вашему первому посту, хотел бы узнать что конкретно в моем случае магические цифры?

[Игорь Воротнёв]

@Screamin-Jay Про магические цифры там и у Криса css-tricks.com/magic-numbers-in-css/. По поводу приручить - никак. У моего отца плохо уже со зрением, ему на 22" Монике все слишком мелкое. В настройках браузера и ОС размер шрифта увеличен принудительно. И это только один из примеров. Про разную толщину отрендереных шрифтов в разных браузерах на разных ОС и девайсах вообще молчу. В статье про магические цифры про это тоже написано.

[Screamin-Jay]

@HeadOnFire Насколько я знаю, на тех кто изменил шрифт самостоятельно не расчитывают ни дизайнеры, ни верстальщики, а выбирают среднего посетителя сайта, естественно если сайт не тематический и не требут дополнительных методов передачи информации. Насколько я вижу задачу front-end перенос из макета в понятный браузеру язык, а так же поиск золотой середины между макетом и девайсом пользователя.

[Игорь Воротнёв]

@Screamin-Jay, без обид, но это устаревший подход. 20-25% трафика идет с портативных девайсов, responsive design уже давно стандарт де-факто, accessibility - важное требование (за бугром тоже стандарт де-факто). Золотая середина сейчас как раз в универсальности, и при этом подходе обычный, милый глазу дизайнера пиксельперфект устарел и "не налазит".

[Screamin-Jay]

@HeadOnFire Но есть достаточно много студий, которые за не больши деньги готовы сделать сайт, естественно без респонсив, клиентовобычно это и устраивает.