Разместить анонс текста в заданные размеры

[Светлана Г.]

Здравствуйте!

Задача состоит в том, чтобы текст с описанием разместить в блок заданной высоты, чтобы это смотрелось корректно. Проблема в том, что текст может иметь совершенно различное форматирование (разный шрифт, жирность, наличие или отсутствие заголовков  и пр.); и соответственно, его точную высоту нельзя рассчитать заранее. Поэтому, может получаться вот так:

 

 

Хотелось бы еще добавить в конец строки многоточие. 

 

Как можно это сделать?

[Great Rash]

.text {

  overflow: hidden;

  text-overflow: ellipsis;

}

[Светлана Г.]

Вот: http://jsfiddle.net/SvetaGr/RF2xc/3/

 

Но не работает.

Edited December 20, 2013 by Светлана Г.

[Great Rash]

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

[bvvell]

Посмотри здесь примеры, может что-то подойдет

[Светлана Г.]

  On 12/20/2013 at 2:13 PM, Great Rash said:

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

 

  On 12/20/2013 at 2:21 PM, bvvell said:

Посмотри здесь примеры, может что-то подойдет

Спасибо! Теперь понятно, в какую сторону двигаться ).

[Светлана Г.]

Сделала так: http://jsfiddle.net/SvetaGr/RF2xc/7/

Для градиентов использовала генератор: http://www.colorzilla.com/gradient-editor/

 

Но в IE9 и меньше - не работает. В чем причина?

Edited December 21, 2013 by Светлана Г.

[bvvell]

  On 12/21/2013 at 9:06 AM, Светлана Г. said:

Сделала так: http://jsfiddle.net/SvetaGr/RF2xc/7/

Для градиентов использовала генератор: http://www.colorzilla.com/gradient-editor/

 

Но в IE9 и меньше - не работает. В чем причина?

градиенты ниже ие9 не работают вообще, они там не поддерживаются, можно для него подсунуть картинку

[Светлана Г.]

  On 12/23/2013 at 8:47 AM, bvvell said:

 

  On 12/21/2013 at 9:06 AM, Светлана Г. said:

Сделала так: http://jsfiddle.net/SvetaGr/RF2xc/7/

Для градиентов использовала генератор: http://www.colorzilla.com/gradient-editor/

 

Но в IE9 и меньше - не работает. В чем причина?

градиенты ниже ие9 не работают вообще, они там не поддерживаются, можно для него подсунуть картинку

 

 

 

А зачем тогда эта строчка:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f1f1f1', endColorstr='#f1f1f1',GradientType=0 ); /* IE6-9 */

?

[bvvell]

  On 12/23/2013 at 12:36 PM, Светлана Г. said:

 

  On 12/23/2013 at 8:47 AM, bvvell said:

 

  On 12/21/2013 at 9:06 AM, Светлана Г. said:

Сделала так: http://jsfiddle.net/SvetaGr/RF2xc/7/

Для градиентов использовала генератор: http://www.colorzilla.com/gradient-editor/

 

Но в IE9 и меньше - не работает. В чем причина?

градиенты ниже ие9 не работают вообще, они там не поддерживаются, можно для него подсунуть картинку

 

 

 

А зачем тогда эта строчка:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f1f1f1', endColorstr='#f1f1f1',GradientType=0 ); /* IE6-9 */

?

 

ну это должно делать градиент в ИЕ, но я не знаю как это правильно отрабатывает, я обычно делаю с картинкой

[Arhidiablo]

Картинкой пнг сделай шириной в 1 пиксель и повторением по горизонту, думаю самый оптимальный вариант предложили т.к. там работает там нет + кода много ради небольшого нюанса.