Если вылазят строки

Garnet · September 20, 2010

В общем проблема следующего рода - есть div с заданной шириной, и ограниченой высотой, содержание заранее не известно. Иногда бывает, что при обрезании текста, видна часть строки, что есть некрасиво. Хотелось бы удалить не полностью отображаемые строки, ни где не могу найти решения , вот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
.content{max-width:200px; max-height:200px; overflow:hidden}
</style>
</head>
<body>
<div class="content"><p>content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content</p></div>
</body>
</html>

Edited September 20, 2010 by Garnet

Vlad · September 21, 2010

Напрямую решения через CSS у задачи нет. Это же не скрипт, который может подсчитать количество строк и насколько они помещаются в блок. Предлагаю другой вариант. Сверху в блок добавляется полупрозрачный градиентный рисунок PNG, выровненный по нижнему краю. Он должен накладываться на текст и создавать эффект постепенного исчезновения текста внизу блока. Как такая идея?

sigma77 · September 21, 2010

Garnet,

А почему нельзя просто увеличить/уменьшить максимальную высоту блока с тем, чтобы влазило ровное количество строк?

Edited September 21, 2010 by sigma77

Great Rash · September 21, 2010

Это просто мысли в слух...

У текста есть line-height, значит можно поставить тексту такой line-height, чтобы в сумме n-строк давали 200.

Или можно поставить высоту блоку, кратную line-height (если позволяет дизайн), допустим при line-heihgt: 16px; высота у блока должна быть n*16.

Хз поможет ли...

Lincky · September 21, 2010

Это просто мысли в слух...
У текста есть line-height, значит можно поставить тексту такой line-height, чтобы в сумме n-строк давали 200.
Или можно поставить высоту блоку, кратную line-height (если позволяет дизайн), допустим при line-heihgt: 16px; высота у блока должна быть n*16.
Хз поможет ли...

я тут сдегка поэкспериментировал подобным способом.. весьма удовлетворительно. Но надо знать все условия, которыми может обладать контент.

!!! Так что автор темы экспериментируйте!

Garnet · September 21, 2010

line-height подобрал, просто было интересно существует ли более гибкое решение...Vlad-прикольно, понравилось =)... Спасибо за ответы.

Sign In

Если вылазят строки

Question

Garnet

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Lincky

Link to comment

Share on other sites

Garnet

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information