#html #css
#HTML #css
Вопрос:
У меня есть значок ссылки, который появляется после определенных ссылок. Если текст ссылки заканчивается в конце строки, значок ссылки иногда переносится на следующую строку. Как я могу гарантировать, что значок ссылки остается рядом с текстом.
lorum ipusm <a href='google.com'>Google dot com</a><a href='/link-info'><img src='link-info.jpg'></a> что происходит:
lorum ipsum Google dot com (переносится сюда)
(ссылка на значок)
что нам нужно, чтобы произошло
lorum ipsum точка Google (переносится сюда)
com (ссылка на значок)
Заранее спасибо!
Вот JSfiddle, иллюстрирующий проблему
Мне нужно com перенести на следующую строку и остаться с (i)
https://jsfiddle.net/r2k8qc15/
Обновленная скрипка
https://jsfiddle.net/8owqzbdu/2/
Мне нужно, чтобы значок совпадал с текстом, поэтому ссылка может быть в абзаце.
На моем изображении здесь я просто добавил a <br> после dot , чтобы проиллюстрировать, как это должно работать.
Комментарии:
1. Пожалуйста, предоставьте скриншоты. Изображение гораздо лучше понять, чем человека, пытающегося его объяснить.
2. Вы можете отредактировать свой фрагмент и добавить достаточно кода, чтобы продемонстрировать вашу проблему, также необходим эскиз желаемого вывода, чтобы полностью показать, что вы пытаетесь воспроизвести.
3. меньшая ширина и пробелы или, что более эффективно,
flexмогут помочь jsfiddle.net/2h3uv89a/1
Ответ №1:
Поэтому, пытаясь быстро объяснить, почему это не сработало с моим значком, я просто использовал (i) и заметил, что он переносится, если между ссылками нет пробела.
Итак, в итоге я сделал следующее
<a href='#'>link 1</a><a href='#' style='white-space:nowrap!important'>amp;nbsp;<img src='icon.jpg'></a>
Поэтому просто используйте amp;nbsp; и nowrap , чтобы прикрепить эту вторую ссылку к последнему слову первой ссылки и потянуть вниз значок с ним, так как я не позволяю ему разрываться.