Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Слова в рамках внитри абзаца


Автор: _Y_ 22.2.2020, 16:17
Добрый день. Возник такой вопрос - то ли примитивный, то ли невыполнимый. Можно ли с помощью более-менее простой разметки HTML пометить некоторые слова или словосочетания рамками и сопутствующими комментариями? Например так, как это сделано здесь, на картинке. Не уверен, что это возможно, но ведь хочется.

user posted image

Зы - если это потребует индивидуальных решений для каждого текста, значит и браться не стоит. Идея состоит в том, чтобы вносить такую разметку в автоматически распознаваемый текст. То есть, HTML-решение должно быть достаточно простым.


Автор: ksnk 22.2.2020, 21:21
Почему нельзя ? https://jsfiddle.net/m2vqLtz9/
Вопрос только в том - это достаточно простая разметка или нет? Разве что поточнее позиционировать подпись по центру, если надо

Автор: _Y_ 23.2.2020, 17:52
ksnk, спасибо, действительно просто:))

Автор: _Y_ 23.2.2020, 19:54
ksnk, прошу прощения, но туплю. Если у меня комментарий короче текста в рамке, то всё нормально, если же он длиннее, то записывается в несколько строк и наезжает на основной текст. А надо, чтобы он распирал рамку. Можно такое сделать?

Автор: ksnk 24.2.2020, 12:54
А может какой-нибудь тултип подойдет ? https://iamceege.github.io/tooltipster/ ? Там разметка еще проще.

Добавлено через 1 минуту и 21 секунду
С рамкой все равно не получится все варианты предусмотреть, она может занимать несколько строк, подсказки тоже не факт, что не будут распирать текст

Автор: ksnk 24.2.2020, 14:03
https://jsfiddle.net/12xvwLkp/1/ - так немного получше, чем было, строки на своем месте и "рамки" сами распирают строки в нужных местах, но у меня не получилось вывести в несколько строк подсказку...

Автор: _Y_ 24.2.2020, 21:56
ksnk, спасибо, в данном случае в несоклько строк мне и не надо smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)