2012-03-19 15 views
1

Есть ли какая-нибудь маска JS/CSS/jQuery, я могу работать, чтобы определить, отрезан ли последний видимый бит содержимого в div, и немного увеличить/уменьшить размер DIV высота, чтобы предотвратить обрезание текста?Установите высоту DIV, чтобы текст не был разрезан или разрезан горизонтально

Наша система позволяет пользователю вводить «элементы», содержащие XHTML (с помощью элемента управления Telerik Edit). У нас есть страница ElementList, где мы показываем все введенные пользователем элементы. Однако, поскольку введенный пользователем XHTML может быть очень большим, на странице списка мы хотим показать только первые 3 строки каждого. Поэтому я установил DIV, содержащий XHTML, на определенную высоту, равную 3 строкам текста, и установите overflow: hidden. Все идет нормально.

Однако, поскольку пользователь может ввести XHTML, они могут создавать таблицы с дополнением (или иначе расходятся со стандартной высотой текста). Текст внутри этих ячеек, по-видимому, разрезан горизонтально, из-за сочетания высоты и переполнения: скрытый. Нашим требованиям человек не нравится внешний вид этого; но, конечно, мы не можем ограничить XHTML, редактируемый конечным пользователем.

Here is a JSFiddle example вопроса.

Этот вопрос не является дубликатом:

  • «Stopping cut off text in variable height div...», как этот вопрос включает в себя «WebKit-линейный зажим», который не имеет никакого отношения к моей ситуации. (и в любом случае этот вопрос никогда не отвечал)
  • «Cut text by height, no truncate», поскольку этот вопрос касается DIV, содержащего чистый текст; мой DIV содержит XHTML. Вы заметите в JSFiddle, что я уже определяю размер DIV, используя измерение em.

Этот вопрос полностью меня озадачил - я надеюсь, что сообщество SO может прийти мне на помощь!

UPDATE:

В конце концов, я подозреваю, что это не может быть решена с помощью HTML/JS/JQuery. Фактически, вы можете создавать таблицу (или серию DIV) с постепенно увеличивающимся верхним краем, так что нет возможности избежать нарезки хотя бы одного из них.

Спасибо всем за их ответы. Я отмечаю это как ответ, потому что, на мой взгляд, это особенно простой/элегантный обходной путь.

+0

Вы действительно должны использовать 'высота: 3.5em;' на контейнере? Что делать, если вы удалите это, и пусть высота div определяется браузером? – bfavaretto

+0

@bfavaretto - к сожалению нет. Как отмечено в этом вопросе, полное содержание DIV, вероятно, будет намного больше, чем мы хотим видеть при просмотре элемента в списке. Другими словами, мы должны ограничить высоту DIV. – mikemanne

+0

Итак, вы хотите изменить высоту, если текст «немного» больше, чем позволяет блок, верно? –

ответ

7

Это не решение, которое вы искали, но это может быть хороший дизайн обходной путь. Я положил белый градиент в нижней части DIV, так что он создает своего рода «визуальный многоточие»

Взгляните: http://jsfiddle.net/robertofrega/LkYjs/3/

Это не так уродлив, как, когда текст просто вырезать.

+0

Спасибо за быстрый ответ. Вы правы, это специально не решает мою проблему, но это изящное (и быстро реализуемое) обходное решение. Я собираюсь попытаться «продать» этот подход моему персоналу. Благодаря! – mikemanne

+0

Сообщите нам, если это сработало :-) –

+0

Это работает, однако фон должен быть белым. –

0

Ваша проблема исходит от overflow:hidden;. Эта строка делает именно то, что вы говорите, чтобы сделать это, а именно, скрыть переполнение. Можете ли вы использовать overflow-y: auto или что-то в этом роде? То, что наряду с grippy (например, SO использует в своих текстовых областях), должно помочь вам.

+0

Спасибо за быстрый ответ! К сожалению, я, вероятно, застрял в переполнении: скрытый, поскольку политика пользовательского интерфейса клиента исключает любые элементы прокрутки (кроме полос прокрутки браузера для общей страницы). – mikemanne

0

Вместо переполнения: скрытый, вы можете установить его в auto, а затем проверить наличие полосы прокрутки при представлении содержимого. Смотрите эту тему:

detect elements overflow using jquery

+0

Спасибо за ответ. Однако проблема заключается не в скрытом содержании - это известно и ожидается. Проблема в том, что данная строка текста иногда частично скрыта («разрезана» по горизонтали). Возможно, мне что-то не хватает, но я не думаю, что просто сравнение scrollHeight с clientHeight поможет мне в этом. – mikemanne

+0

BTW: сравнение scrollHeight-to-clientHeight отлично работает даже при переполнении: скрыто. Это не зависит от фактического отображения полосы прокрутки через переполнение: авто. Просто FYI, если вы хотите использовать свою технику ссылок на переполнение: hidden div. :) – mikemanne

+0

О, круто - спасибо за головы. Я решил, что если текст был отключен, а переполнение было установлено на автоматическое, полоса прокрутки будет обнаружена, а высота затем может быть скорректирована с помощью jQuery. –

0

Try CSS3 свойство: text-overflow и установить его на ellipsis, значение по умолчанию clip

+0

Спасибо за ответ. Я использовал эллипсис раньше - однако я не думаю, что он предотвращает появление «строк» ​​текстовых строк. Скорее, это просто визуальный сигнал, что некоторый текст был усечен. Кроме того, когда я последний раз использовал многоточие, он поддерживался только в IE. – mikemanne

+0

Быстрое примечание: последняя версия Firefox (11.0) Кажется, что поддерживает директиву CSS с многоточием. – mikemanne

Смежные вопросы