товарищи, это, может, и бред, но есть ли возможность если элемент находится посреди текста, поднять этот элемент над текстом, на межстрочье?
Поясню:
Надо сделать кастомный тег чтобы

«блаблабла[опа!]блабла»

превратилось в

————-—[опа!]
«блаблаблаблабла»

Без тире, естественно.
position: relative не подходит, оставляет в тексте разрыв на месте, где был элемент.

Tagged with →  

15 Responses to Возможно если элемент находится посреди текста, поднять этот элемент над текстом, на межстрочье?

  1. Soaen:

    Опа должно надодиться на над четвертым «бла». Это именно для того, чтобы не уезжало ничего никуда.

  2. DeiZZ:

    есть несколько вариантов, но надо проверять:
    1. display: inline-block; position: relative; bottom: 10px; /* display: inline-block; некошерно работает в ИЕ7 и ФФ2 не работает вообще */
    2. margin-top: -10px; /* в некоторых браузерах может косячно работать с элементами с display: inline */
    3. font-size: 12px; line-height: 28px; /* совсем не уверен в этом */
    а вообще есть тег , можно подогнать в нем нужный размер шрифта и тому подобное

  3. DeiZZ:

    парсер лох. тег SUP

  4. Regwhite:

    можно обернуть это в span с position:relative, а внутрь положить еще спан с абсолютом и margin-top: -1em;

  5. XibZZ:

    теоретически (1) для ие7 чинится откидыванием оному display:inline;zoom:1

    но тоже надо проверять

  6. Ikabad:

    Ну что-то такое. http://jsfiddle.net/qQPCG/3/

    Не понимаю воплей по поводу FF2. Я этого зверя давно не видел.

  7. DeiZZ:

    на самом деле display: inline-block; нормально работает в ИЕ7 только для элементов, у которых inline по умолчанию, а для блочных элементов начинает косячить, так что применять на span и i вполне себе можно.

  8. XibZZ:

    о как! а я всю жизнь display: inline; zoom:1 везде откидываю на всякий случай :

  9. Soaen:

    Проблема решена. Как тут сделано: http://myx.ostankin.net/html-chords
    Текст для увеличения межстрочного расстояния оборачивается в line-height: 2.5; margin-top: 10px, а выскакивающий элемент — в position: absolute; line-height: 0. Гениально и просто.

  10. Soaen:

    Ну, почти то же, что и все говорили. Спасибо за помощь!

  11. XbiNo:

    HTML скрипт

  12. HCSSwet:

    от хозяина сайта просили передать: «Приятно, черт возьми 🙂 Скажи Флэш Хаосу, что я был рад, что мой скрипт оказался полезным :)»

  13. Soaen:

    Ох, да это ему спасибо за работу. Скрипт тут только не причем, я js не умею и его не смотрел.

Добавить комментарий