Обрежьте метку: узнайте, когда текст выходит за пределы 2-строчной метки длиной 400 пикселей.

У меня есть метка (фиксированной ширины и высоты), которая суммирует длинный список критериев выбора, и в спецификациях говорится, что если содержимое метки превышает 2 строки @ 400 пикселей, его следует обрезать, добавить эллипс и остальные должен отображаться в зависшем div при наведении курсора, а-ля всплывающая подсказка. Хотел бы посоветоваться, как лучше выбрать точку обрезки.

Пока у меня есть только две идеи, и я не очень доволен ни одной из них:

  • Я предполагаю усечение, исходя из длины контента; Я считаю, что это особенно неразумно, поскольку (1) я использую пропорциональные шрифты и (2), поскольку это двухстрочный текст, перенос может легко испортить его.

  • Я использую вторую скрытую метку и получаю ширину в javascript. Немного лучше, но не согласен с переносом, так как скрытая метка будет состоять только из 1 строки.

Какое бы решение я ни реализовал, мне, вероятно, придется делать это строго на JavaScript.


javascript text html label truncate
person Liz    schedule 24.09.2010    source источник
comment
Я слышал об этом хаке некоторое время назад, не знаю где: взять текст, разбить по словам и поместить каждое слово в свой элемент внутри метки; затем проверьте каждое слово по очереди, чтобы увидеть, находится ли оно на той же строке (offsetHeight?), что и предыдущее слово. Если нет, вы нашли разрыв строки.   -  person Piskvor left the building    schedule 24.09.2010

Ответы (1)


arrow_upward
1
arrow_downward

Разве нельзя скрыть метку, а затем установить ее ширину 400 пикселей? Затем вы можете просто измерить высоту скрытой метки и продолжать удалять буквы, пока не останется всего две строки, что даст вам количество букв, которые нужно сохранить в исходной метке. Но, может быть, стиль исчезает, когда этикетка скрыта? Я не уверен.

person Mathias Nielsen    schedule 24.09.2010
comment
Да, это то, что я в итоге сделал. Стилизация не выходит за рамки, но (кстати, я использую jQuery) функция .height() имеет тенденцию возвращать постоянное значение, если метка явно не имеет «height: auto;» где-то указано. Это действительно причудливое поведение, поскольку без него было бы возвращено 18, а с ним 17 * строк. Я опубликую полное решение позже, когда закончу его писать. - person Liz; 25.09.2010