Как лучше обрезать текст

[Anna Zharova]

Всем привет,

 

Коллеги подскажите, как по грамотней сделать обрезание текста в блоке 

 

Макет: http://azharova.ru/test/img/promo.jpg

 

Верстка: http://azharova.ru/test/promo.html

 

Задача:

1. для вот такого блока http://prntscr.com/5wtpc1 выровнять белые кнопки так что бы они всегда были на одном уровне

 

2. Обрезать текст анонса как в макете

 

[psywalker]

Всем привет,

 

Коллеги подскажите, как по грамотней сделать обрезание текста в блоке 

 

Макет: http://azharova.ru/test/img/promo.jpg

 

Верстка: http://azharova.ru/test/promo.html

 

Задача:

1. для вот такого блока http://prntscr.com/5wtpc1 выровнять белые кнопки так что бы они всегда были на одном уровне

 

2. Обрезать текст анонса как в макете

1. Выставить блокам одинаковую высоту и соответственно кнопки на один уровень по горизонтали.

 

2. Решение тут.

[Anna Zharova]

 

Всем привет,

 

Коллеги подскажите, как по грамотней сделать обрезание текста в блоке 

 

Макет: http://azharova.ru/test/img/promo.jpg

 

Верстка: http://azharova.ru/test/promo.html

 

Задача:

1. для вот такого блока http://prntscr.com/5wtpc1 выровнять белые кнопки так что бы они всегда были на одном уровне

 

2. Обрезать текст анонса как в макете

1. Выставить блокам одинаковую высоту и соответственно кнопки на один уровень по горизонтали.

 

2. Решение тут.

 

А если я заранее не знаю, высоту блока, так как не знаю сколько контента будет.

Вариант я видела, но мне надо что было видно две строчки, а пример применительно к строке получается

[Great Rash]

Вы знаете заранее высоту блока - она у вас в макете нарисована. Если там будет мало текста, то между текстом и кнопкой будет просто пустое место. Больше никак вы кнопки на одном уровне не сделаете.

[psywalker]

 

 

Всем привет,

 

Коллеги подскажите, как по грамотней сделать обрезание текста в блоке 

 

Макет: http://azharova.ru/test/img/promo.jpg

 

Верстка: http://azharova.ru/test/promo.html

 

Задача:

1. для вот такого блока http://prntscr.com/5wtpc1 выровнять белые кнопки так что бы они всегда были на одном уровне

 

2. Обрезать текст анонса как в макете

1. Выставить блокам одинаковую высоту и соответственно кнопки на один уровень по горизонтали.

 

2. Решение тут.

 

А если я заранее не знаю, высоту блока, так как не знаю сколько контента будет.

Вариант я видела, но мне надо что было видно две строчки, а пример применительно к строке получается

 

1. Если вы заранее не знаете высоту блока, тогда у вас не получится сделать кнопки на одном уровне.

2. А если так?

[Anna Zharova]

А если я абсолютно позиционирую кнопку, прибив ее  к низу?

[Great Rash]

Ну и что?

[psywalker]

А если я абсолютно позиционирую кнопку, прибив ее  к низу?

А вы сначала попробуйте все ваши варианты и выложите сюда. Вдруг что получится. Заодно и нам покажете)

[Anna Zharova]

 

 

 

Всем привет,

 

Коллеги подскажите, как по грамотней сделать обрезание текста в блоке 

 

Макет: http://azharova.ru/test/img/promo.jpg

 

Верстка: http://azharova.ru/test/promo.html

 

Задача:

1. для вот такого блока http://prntscr.com/5wtpc1 выровнять белые кнопки так что бы они всегда были на одном уровне

 

2. Обрезать текст анонса как в макете

1. Выставить блокам одинаковую высоту и соответственно кнопки на один уровень по горизонтали.

 

2. Решение тут.

 

А если я заранее не знаю, высоту блока, так как не знаю сколько контента будет.

Вариант я видела, но мне надо что было видно две строчки, а пример применительно к строке получается

 

1. Если вы заранее не знаете высоту блока, тогда у вас не получится сделать кнопки на одном уровне.

2. А если так?

 

А вот не сработал вариант п.2

 

Ну и что?

получилось, но вот не задача с текстом, не срабатывает text-overflow: ellipsis; у меня почему-то, пока не поняла почему

[psywalker]

 

 

 

 

Всем привет,

 

Коллеги подскажите, как по грамотней сделать обрезание текста в блоке 

 

Макет: http://azharova.ru/test/img/promo.jpg

 

Верстка: http://azharova.ru/test/promo.html

 

Задача:

1. для вот такого блока http://prntscr.com/5wtpc1 выровнять белые кнопки так что бы они всегда были на одном уровне

 

2. Обрезать текст анонса как в макете

1. Выставить блокам одинаковую высоту и соответственно кнопки на один уровень по горизонтали.

 

2. Решение тут.

 

А если я заранее не знаю, высоту блока, так как не знаю сколько контента будет.

Вариант я видела, но мне надо что было видно две строчки, а пример применительно к строке получается

 

1. Если вы заранее не знаете высоту блока, тогда у вас не получится сделать кнопки на одном уровне.

2. А если так?

 

А вот не сработал вариант п.2

 

Ну и что?

получилось, но вот не задача с текстом, не срабатывает text-overflow: ellipsis; у меня почему-то, пока не поняла почему

 

Может быть вы всё-таки выложите код на http://jsfiddle.net/?

[Anna Zharova]

 

 

 

 

 

Всем привет,

 

Коллеги подскажите, как по грамотней сделать обрезание текста в блоке 

 

Макет: http://azharova.ru/test/img/promo.jpg

 

Верстка: http://azharova.ru/test/promo.html

 

Задача:

1. для вот такого блока http://prntscr.com/5wtpc1 выровнять белые кнопки так что бы они всегда были на одном уровне

 

2. Обрезать текст анонса как в макете

1. Выставить блокам одинаковую высоту и соответственно кнопки на один уровень по горизонтали.

 

2. Решение тут.

 

А если я заранее не знаю, высоту блока, так как не знаю сколько контента будет.

Вариант я видела, но мне надо что было видно две строчки, а пример применительно к строке получается

 

1. Если вы заранее не знаете высоту блока, тогда у вас не получится сделать кнопки на одном уровне.

2. А если так?

 

А вот не сработал вариант п.2

 

Ну и что?

получилось, но вот не задача с текстом, не срабатывает text-overflow: ellipsis; у меня почему-то, пока не поняла почему

 

Может быть вы всё-таки выложите код на http://jsfiddle.net/?

 

Ну вот http://azharova.ru/test/promo.html

[psywalker]

Ну вот http://azharova.ru/test/promo.html

 

1. У вас всё равно в левой колонке текст падает под кнопку. Я бы вам рекомендовал всё-таки поставить фикс. высоту для блока с текстом.

2. Что касается троеточия в конце, то можно с помощью псевдоэлемента решить эту задачу.

.anons:after {position: absolute; background: цвет фона; content: ' ...'; bottom: 0; right: 0; width: 5px; height: высота строки;}

Как-то так...

[Anna Zharova]

не коллеги, что-то тут не правильное получается. В макете, нарисовано вот так http://prntscr.com/5x8cf0 получается, что как-то это должно все высчитываться. Т.е. получается, что всем заведует заголовок, от него зависит .anons

Чем меньше заголовок тем больше АНОНС, чем больше заголовок тем меньше АНОНС

 

Как быть в таком случае? Программно считать?

[psywalker]

Ну колонки, если извратиться, ещё можно сделать. Но вот как сделать троеточие в блоке с нефиксированной высотой, я даже не знаю. Возможно более опытные камрады смогу помочь, я здесь лошара). Ведь проблема ещё в том, что точки нужны не в конце последнего слова, а в конце определённого. Вот тут конечно засада(

[Great Rash]

На самом деле дизайнер показал своё полное неумение работать с web. Из макета непонятно может ли быть такой случай когда заголовок обрежется., или такое может быть только с текстом. Тогда непонятна максимальная длина заголовка. Обычно такие вещи как обрезание текста под определенную длину делаются на сервере, но если вам хочется сделать это именно на клиенте. То гуглите плагин для jQuery: называется dotdotdot. Но и плагин вас не спасёт, т.к. непонятен вышеописанный случай с заголовком. Получается, что может возникнуть ситуация, когда у блока не будет текста вовсе, а будет один заголовок.

Я бы договорился с заказчиком заложиться на определенной длины заголовки. Например, что заголовок не может быть больше 4-5 строк. Тогда макет будет вести себя предсказуемо. Сейчас же вам надо считать высоту заголовка, вычитать её из высоты блока и вычислять сколько строк текста поместится в оставшуюся область.

[psywalker]

На самом деле дизайнер показал своё полное неумение работать с web. Из макета непонятно может ли быть такой случай когда заголовок обрежется., или такое может быть только с текстом. Тогда непонятна максимальная длина заголовка. Обычно такие вещи как обрезание текста под определенную длину делаются на сервере, но если вам хочется сделать это именно на клиенте. То гуглите плагин для jQuery: называется dotdotdot. Но и плагин вас не спасёт, т.к. непонятен вышеописанный случай с заголовком. Получается, что может возникнуть ситуация, когда у блока не будет текста вовсе, а будет один заголовок.

Я бы договорился с заказчиком заложиться на определенной длины заголовки. Например, что заголовок не может быть больше 4-5 строк. Тогда макет будет вести себя предсказуемо. Сейчас же вам надо считать высоту заголовка, вычитать её из высоты блока и вычислять сколько строк текста поместится в оставшуюся область.

Да, согласен. Я бы тоже попытался договориться с дизайнером/заказчиком, чтобы колонки вообще были фиксированной высоты... для начала, и чтобы абзацы с текстом тоже имели фикс. высоту.

[Z1gnet]

ну как по мне судя из дизайна колонки и так фиксированной высоты. просто дизайнер немного кривоват, я про то что в левом блоке строка заканчивается выше чем в остальных. ну и конечно это слабо на веб дизайн похоже. как я себе вижу данную ситуацию. заголовок и текст заворачиваем в контейнер и даем ему фиксед высоту и ovh. затем на текст даем нормальный line-height (целое число) и ставим его одинаковым и на текст и на заголовок, чтобы линии строк совпадали даже при разной длине заголовка http://take.ms/Db1gl

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

мне кажется это достаточно оптимальное решение при минимуме затрат