For displaying math in my document, I use inline SVG images. This works perfectly, but when an inline equation approaches the end of a line, a period that comes after it will snap to the next line.

Example:
HTML:

if and only if <img src="/system/tmp/56010d9d67c3fb51418fdca123c469fe.svg" alt="\vect{l}\cdot\vect{p}=0" class="inline-math">.

CSS:

.inline-math {
    vertical-align: middle;
    margin: -2em 0;
}

Is there any way I can avoid this behaviour?

1. 56010d9d67c3fb51418fdca123c469fe.svg‎ 4.8 kB ‎
   equation

Wrapping the image and period in a span with "white-space: nowrap" would work, although this does bulk up the markup. It could be done dynamically with JavaScript to avoid adding it manually to the document. I can't think of an easier way to do this at the moment, unfortunately.

Thanks Mike! That solution works great for me. I'm preprocessing the HTML anyway to generate the formulas.