Как сделать, чтоб при переносе строк изображения вели себя как буквы?

Question

[Евгений Обыкновенный]

На сайте в текст нужно вставлять мат. формулы, значки в виде изображений. Иногда получается, что точка после формулы переносится на следующую строку.

Текст текст текст текст текст текст текст [img]
. Текст текст текст текст текст текст текст

Можно, конечно, вручную предусматривать и запрещать переносы в ненужных местах, оборачивая формулу и следующий за ней знак препинания, например в теги span со свойством white-space: nowrap. Но это довольно трудоемко.

Пробовал ставить для изображений свойства display:inline, display:inline-block — не помогает. Можно ли как-то заставить изображения вести себя как буквы при переносах?

Comments

[dev400]

https://jsfiddle.net/mhpwf6gs/ ???

[Евгений Обыкновенный]

dev400: Эффект портится при просмотре в разных браузерах, видимо, из-за разной ширины окна, шрифта, поэтому не ссылка на эмулятор, а скрин

[Евгений Обыкновенный]

Точку от обычного слова никогда не оторвет при переносе.

Answer 1

[V Sh.]

Попробуйте после формулы использовать неразрывный пробел ( ). По идее, будет переносится либо вся формула вниз (если места в строке не хватает), либо точка будет прилипать к формуле. Ну и display: inline для img, естественно.