Ограничить отображаемую длину строки на веб-странице - PullRequest
Новая
       17

Ограничить отображаемую длину строки на веб-странице

2 голосов
/ 12 октября 2008

Я ищу технику (javascript, CSS и т. Д.), Которая позволит мне контролировать количество отображаемой строки. Строка является результатом поиска (и поэтому изначально не известна). Простой подход к подсчету символов является тривиальным, но не приемлемым, поскольку он должен обрабатывать пропорциональные шрифты. Другими словами, если я хочу ограничиться, скажем, 70 пикселей, то в приведенных ниже примерах показано различное количество символов (9 и 15), которые измеряют одинаково:

Добро пожаловать, М ...
Привет Йен, если я ...

Если вы посмотрите на результаты поиска Yahoo, они могут ограничить длину строк заголовка и добавить многоточие в конце длинных строк, чтобы указать больше. (попробуйте сайт: loot.com wireless + клавиатура + и + мышь, чтобы увидеть пример того, как Yahoo добивается этого)

Есть идеи?

Ответы [ 5 ]

2 голосов
/ 12 октября 2008

Возможно, свойство CSS overflow: hidden; может вам помочь в сочетании с width.

1 голос
/ 12 октября 2008

Использование диапазона с фиксированной шириной, overflow-x: hidden и пробел: nowrap будет началом.

Получить элипсис в кросс-браузерном сценарии будет сложно. IE имеет переполнение текста: elipsis, но это нестандартно. Это эмулируется с -o-text-overflow в Opera. Однако у Mozilla этого нет. JavaScript-API Yahoo обрабатывают это.

0 голосов
/ 22 января 2015

В CSS: .class-name { ширина: 5em; пустое пространство: nowrap; переполнение текста: многоточие; }

Надеюсь, это поможет вам.

0 голосов
/ 20 октября 2008

Для кросс-браузерного решения с использованием чистого CSS взгляните на переполнение текста в Hedger Wang: прототип многоточия здесь:

http://www.hedgerwow.com/360/dhtml/text_overflow/demo2.php

0 голосов
/ 12 октября 2008

Yahoo делает это на стороне сервера, усечение и elipsis ('...') возвращаются в HTML. Предположительно это делается для подсчета символов, и если это не вариант для вас, то серверная часть отсутствует.

Кроме overflow: hidden Я не уверен, что CSS может помочь вам здесь. Вы можете измерить ширину содержащего элемента, используя Javascript, и обрезать текст на основе этого. Это может использоваться в сочетании с overflow:hidden;, чтобы текстовые элементы не просто внезапно изменяли размер, но вам, возможно, придется извлечь текст и добавить временный элемент на страницу где-нибудь, чтобы выполнить измерение. В зависимости от количества усеченных элементов это может работать не очень хорошо.

Еще один слегка хакерский вариант - измерить ширину элемента, содержащего букву 'W', затем подсчитать количество символов и усечь, если (char_count * width_of_w) > desired_width.

Вы можете использовать text-wrap: none;, чтобы остановить перенос текста на новые строки, хотя это свойство CSS3, и последнее, что я проверял, поддерживалось только в IE (представьте, что я потрясен, когда обнаружил это!)

...