Комментарии 35
Самая жесть начинается, когда нужно оценить размеры инлайн элемента, который разбивается на две строки… Тут браузеры начинают себя вести самым непредсказуемым образом.
Собственно говоря, у меня примерно с этого все и началось.
Хм… Может, я чего не понял, но, по-моему, в этом случае данный код не поможет. Например, если у нас есть два слова: одно на одной строке, другое — на другой. Если их вырвать из текста, то они встанут на одну строку и высота клонированного блока получится другой.
Я не придираюсь — просто самого интересует подобная тема. :)
Я не придираюсь — просто самого интересует подобная тема. :)
Давайте размышлять в эту сторону. Переносится второе слово может по трем причинам: либо между ними стоит перенос (BR) либо он переносится по причине изменения свойств CSS, кои копируются, либо в этом виноват некий контейнер, который заставляет сузится наш инлайн блок. Тогда очевидно что размеры нужно смотреть не у текстового блока.
Ну, тут многое зависит от задачи для которой нужны размеры. В моем случае, поверх ссылки нужно было разместить абсолютно спозиционированный контейнер. Все было ничего до тех пор, пока ссылка не переносилась на следующую строку.
Я эту задачу решил разбив текст ссылки на спаны, и высчитывал уже их координаты.
Я эту задачу решил разбив текст ссылки на спаны, и высчитывал уже их координаты.
Давным давно поставили мне задачу резать длинные слова не помещающиеся в контейнер открытки, для этого нужно было определять ширину неразрываемой последовательности символов. Для IE это пара пустяков там есть свойство у обьекта TextRange, а вот для других пришлось извращаться. Вставлял в цикле маркер после каждого символа и вычислял его смещение, так находил длинну.
Код можно в раблер открытках подглядеть… только сильно не критикуйте я был молод и горяч :)
Код можно в раблер открытках подглядеть… только сильно не критикуйте я был молод и горяч :)
И позанудствую немного: «FF2, FF3, IE7» — мой опыт показывает, что тестировать нужно в IE6 (в нем больше всего проблем) и (да простят меня Оперисты) в Опере (Опера — классный браузер, но иногда в нем попадается не вполне очевидные поведение).
Работает и в IE6 и в Опере 9.6x
Когда ж уже он помрёт, этот ие6…
Сразу вспоминаю 1 апрельскую шутку про IE. Ох как бы хотелось, чтобы сон стал явью :)
Боюсь, о нем не удастся забыть еще ближайшие года два—три.
Но, во многом, это зависит и от нас (имею в виду, вебмастеров и заказчиков). Так как пока все сайты оттачиваются под этот браузер, у пользователей не будет мотивации перейти на новый. Но перестать оттачивать под этот браузер сайты рискнут далеко не все заказчики. Пока, мне известен единственный крупный сайт, который осознанно отказался от поддержки наследиябывшихвремен — Веборама (технологам и владельцем которого — огромный респект).
Но, во многом, это зависит и от нас (имею в виду, вебмастеров и заказчиков). Так как пока все сайты оттачиваются под этот браузер, у пользователей не будет мотивации перейти на новый. Но перестать оттачивать под этот браузер сайты рискнут далеко не все заказчики. Пока, мне известен единственный крупный сайт, который осознанно отказался от поддержки наследиябывшихвремен — Веборама (технологам и владельцем которого — огромный респект).
>Когда ж уже он помрёт, этот ие6…
Ну типа «Ленин жил, Ленин жив, Ленин будет жить»
Ну типа «Ленин жил, Ленин жив, Ленин будет жить»
Ага и часто вы храните стили элемента в атрибуте style?
А если размер шрифта в em?
Чтобы не проверять браузер, можно просто изменить cssText:
А если размер шрифта в em?
Чтобы не проверять браузер, можно просто изменить cssText:
clone.style.cssText = hiddenStyle;
Достаточно примитивно. я делал подобное для авто-ресайза textarea. Вроде у вас <script>alert(123);</script> будет заметен для пользователя.
Недавно столкнулся с задачей похожей на эту ) Необходимо было четко отрезать в тексте первые 15 строк. Решается элементарно. Тексту назначается css свойство line-height 1.5em скажем и первые 15 строчек получаются 15*1.5em=22.5em. А ограниченивание ширины соответственно width: 22.5em, overflow: hidden
document.all существует в «Опере»
НЛО прилетело и опубликовало эту надпись здесь
Я уже приходил к этому решению и могу сказать — оно косячное.
Вы забываете, что стили каскадные. Вы прицепляете div к body, в результате он получает другой набор предков. А каждый из предков может поменять различные элементы стиля. Например шрифт мог быть определен на прапрадедушке, а на body определен совсем другой.
Вы забываете, что стили каскадные. Вы прицепляете div к body, в результате он получает другой набор предков. А каждый из предков может поменять различные элементы стиля. Например шрифт мог быть определен на прапрадедушке, а на body определен совсем другой.
Так стили копируются же не с проста. Переностятся на клон. Или я не понял чего?
конечно не понял!
в style лежат только стили определенные непосредственно на элементе.
а если его прадедушка имеет класс «grandfather», а в CSS определено правило:
.grandfater * {font-size:300%}
то ты размер шрифта не получишь прочитав style
погугли такую конструкцию document.defaultView.getComputedStyle и ты поймешь, что все устроено гораздо сложнее.
в style лежат только стили определенные непосредственно на элементе.
а если его прадедушка имеет класс «grandfather», а в CSS определено правило:
.grandfater * {font-size:300%}
то ты размер шрифта не получишь прочитав style
погугли такую конструкцию document.defaultView.getComputedStyle и ты поймешь, что все устроено гораздо сложнее.
Опять же использование innerHTML не безопасно — если там находится скрипт, то он отработает, а вам может этого и не надо было. Т.е. нельзя слепо использовать этот трюк. Надо всегда думать о применимости в каждом конкретном случае.
Функция далеко не универсальная, и пока что нашла примерение себе там, где не может быть ничего кроме текста. Да, согласен, что бы функция была идеальна, можно в нее нафигачить столько обработчиков, вализаторов. Только после этого обязательно появятся люди, которые мне сразу объяснят, что код избыточен, зачем столько килобайт кода для проверки каких-то размеров и так далее ;)
Вобщем — берите и переписывайте так, как вам нравится.
Вобщем — берите и переписывайте так, как вам нравится.
В mootols есть getStyle, он вычисляет уже окончательные стили. Впрочем, если у нас есть вложенные ноды, то не факт, что они будут скопированы правильно без явного копирования. Есть ли в mootools функции для вычисления размеров инлайн-элементов, мне неизвестно. А также есть ли что-то подобное в других фреймворках.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Определение размеров текста