Я показываю подсказку пузыря для некоторых элементов короткого промежутка. Пузыри расположены в центре ниже этого промежутка и отлично смотрятся, пока пролет не разбит на две линии.
Выглядит хорошо:
tell <span>irregular: told, told</span>
Выглядит плохо:
tell <span>irregular: told,
told</span>
Это выглядит плохо, потому что пузырь больше не центрирован под пролетом. Есть ли способ использовать JavaScript или jQuery, чтобы сказать, если этот интервал разбит на две строки?
Комментарий 9000 верен. Трюк имеет доступ к <span>, который, как вы знаете, будет отображаться в одной строке. Вы можете сделать это, обернув первое слово вашего блока в промежутке с помощью определенного id, вы также можете использовать последнее слово или другое слово; бывают случаи, когда одно слово пересекает линии, но первое слово должно быть безопасным.
Как только у вас есть что-то только на одной строке, вы можете сравнить его высоту с высотой <span>, которая получит всплывающую подсказку. Если <span>, получающий всплывающую подсказку, выше, чем однострочный <span>, то он завернут в несколько строк.
Попробуйте этот jsfiddle:
Отрегулируйте размер правых панелей, пока красный текст не обернется, а зеленый текст - нет. Затем нажмите клавишу Выполнить на панели инструментов вверху, и она должна сказать это в нижней части панели результатов:
#has-break spans more than one line
#no-break spans only one line
Я не очень горжусь этим взломом, но он должен работать.
Мне остается задаться вопросом, будет ли лучший алгоритм позиционирования для вашей подсказки лучше. Возможно, вытащите координаты мыши из события наведения и используйте это, чтобы позиционировать подсказку, а не позиционировать ее на основе <span>.
Я думаю, что лучший способ сделать это будет с white-space: nowrap в CSS:
CSS
span.bubble {
white-space: nowrap;
}
HTML:
tell <span class="bubble">irregular: told, told</span>
С или без разрыва строки вы можете просто вычислить с помощью .css() в jQuery, где именно на экране находится этот диапазон, и затем соответствующим образом поместите подсказку. Или вы можете использовать плагин jQuery, чтобы сделать все это для вас.
Не совсем уверен, какие уровни помощи вы ищете, но \n - это идентификатор для строк в JS