Вставьте изображение в текст и сохраняйте перенос текста с помощью CSS

Question

Я только что столкнулся с проблемой, с которой не может справиться мое текущее (почти равное 0) знание CSS.Вот в чем дело:

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

+---------------------+
| I was [x] on my way |
| to the city in the  |
| sun                 |
+---------------------+

, где [x] - изображение.Важно, чтобы вторая часть текста была перенесена, чтобы все выглядело как в приведенном выше примере.

Текст в контейнере может отличаться;тем не менее, я всегда знаю, какая часть текста идет раньше, а какая часть текста идет после изображения.

Как мне это сделать с помощью CSS?

Answer 1

Если вы поместите тег <img> в середину текста, по умолчанию все будет выглядеть так, если только вы не переопределите свойство display изображения. Вы также можете поэкспериментировать со свойством vertical-align изображения, чтобы оно хорошо сочеталось с окружающим текстом.