Ограничить отображаемую длину строки на веб-странице
Я ищу метод (javascript, CSS, что угодно ???), который позволит мне контролировать количество отображаемой строки. Строка является результатом поиска (и поэтому изначально неизвестна). Подход с использованием простого подсчета символов тривиален, но неприемлем, поскольку он требует обработки пропорциональных шрифтов. Другими словами, если я хочу ограничиться 70 пикселями, то в приведенных ниже примерах показано различное количество символов (9 и 15), оба измерения одинаковы: -
Добро пожаловать M ...
Привет Иэн, если я ...
Если вы посмотрите на результаты поиска Yahoo, они могут ограничить длину строк заголовков и добавить многоточие в конце длинных строк, чтобы указать больше. (попробуйте site: loot.com беспроводные + клавиатура + и + мышь, чтобы увидеть, как Yahoo добивается этого)
Есть идеи?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Возможно, вам поможет свойство CSS overflow: hidden; в сочетании с width.
Спасибо - Отличное начало! style = 'переполнение: скрыто; ширина: 100 пикселей; height: 1.2em 'успешно обрабатывает ограничение длины (вам нужно добавить высоту, чтобы остановить перенос). Единственным недостатком является то, что я никак не могу придумать, было ли переполнение, поэтому я не знаю, добавлять ли многоточие.
вместо того, чтобы применять высоту - потому что все мы знаем, что это не весело ... попробуйте использовать свойство CSS white-space: nowrap. Это заставит все строки оставаться на одной строке: D
Использование диапазона с фиксированной шириной, overflow-x: hidden и white-space: nowrap будет началом.
Получить эллипсис в кроссбраузерном сценарии будет сложно. IE имеет переполнение текста: elipsis, но это нестандартно. Это эмулируется с помощью -o-text-overflow в Opera. Однако в Mozilla этого нет. API-интерфейсы Yahoo Javascript справляются с этим.
Я думаю, вам нужно переполнение-x: hidden. Или просто выберите overflow: hidden на всякий случай.
ой ты прав опечатка overflow-y не имеет смысла на промежутке, буду редактировать.
Yahoo делает это на стороне сервера, усечение и эллипсис ('...') возвращаются в HTML. Предположительно это делается по количеству символов, и если это не вариант для вас, то серверная часть отсутствует.
Помимо overflow: hidden, я не уверен, что CSS может вам здесь помочь. Вы можете измерить ширину содержащего элемента с помощью Javascript и обрезать текст на основе этого. Это можно было бы использовать вместе с overflow:hidden;, чтобы текстовые элементы не меняли размер внезапно, но вам, возможно, придется извлечь текст и добавить временный элемент на страницу где-нибудь для измерения. В зависимости от количества элементов, которые нужно усечь, это может работать не очень хорошо.
Другой немного хитрый вариант - измерить ширину элемента, содержащего букву «W», затем подсчитать количество символов и усечь, если (char_count * width_of_w) > desired_width.
Вы можете использовать text-wrap: none;, чтобы остановить перенос текста на новые строки, хотя это свойство CSS3, и последнее, что я проверял, поддерживалось только IE (представьте мой шок, когда я обнаружил это!).
Для кроссбраузерного решения на чистом CSS взгляните на прототип Hedger Wang text-overflow: ellipsis, здесь:
In CSS: .class-name{ width: 5em; white-space: nowrap; text-overflow: ellipsis; }
Hope it can help you.
возможный дубликат Как с помощью CSS указать длинный текст в меньшем фиксированном столбце?