I'm trying to treat any SVG symbol in a "p" tag that is followed by a punctuation like a dot or a question mark to be treated as one word.
Meaning that when the line breaks the whole symbol with the dot goes to the next line, not just the dot that comes after it.
I tried to achieve this with CSS with no luck.
Here's a codepen example ...
http://codepen.io/sheko_elanteko/full/RomyWa/
<p>Some Text <svg style="vertical-align:-4.05412351387375px" width="59px" height="26px" viewBox="13 -1 59 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><g><symbol overflow="visible" id="svg513151716365latex_01glyph0-0"><path style="stroke:none;" d=""></path></symbol><symbol overflow="visible" id="svg513151716365latex_01glyph0-1"><path style="stroke:none;" d="M 0.546875 -4.59375 C 0.921875 -5.25 1.328125 -5.546875 1.890625 -5.546875 C 2.484375 -5.546875 2.859375 -5.234375 2.859375 -4.625 C 2.859375 -4.078125 2.578125 -3.671875 2.140625 -3.421875 C 1.953125 -3.3125 1.71875 -3.21875 1.375 -3.09375 L 1.375 -2.96875 C 1.890625 -2.96875 2.09375 -2.9375 2.296875 -2.875 C 2.921875 -2.703125 3.234375 -2.265625 3.234375 -1.578125 C 3.234375 -0.8125 2.734375 -0.203125 2.0625 -0.203125 C 1.8125 -0.203125 1.625 -0.25 1.28125 -0.484375 C 1.03125 -0.65625 0.890625 -0.71875 0.734375 -0.71875 C 0.53125 -0.71875 0.375 -0.578125 0.375 -0.390625 C 0.375 -0.0625 0.71875 0.125 1.375 0.125 C 2.171875 0.125 3.03125 -0.140625 3.46875 -0.71875 C 3.71875 -1.046875 3.875 -1.5 3.875 -1.96875 C 3.875 -2.4375 3.734375 -2.859375 3.484375 -3.125 C 3.296875 -3.328125 3.125 -3.4375 2.734375 -3.609375 C 3.34375 -3.96875 3.578125 -4.421875 3.578125 -4.84375 C 3.578125 -5.59375 3 -6.078125 2.171875 -6.078125 C 1.234375 -6.078125 0.671875 -5.484375 0.40625 -4.625 Z M 0.546875 -4.59375 "></path></symbol><symbol overflow="visible" id="svg513151716365latex_01glyph1-0"><path style="stroke:none;" d=""></path></symbol><symbol overflow="visible" id="svg513151716365latex_01glyph1-1"><path style="stroke:none;" d="M 17.328125 -1.1875 L 16.359375 -1.1875 L 8.90625 18 L 8.84375 18 L 5.171875 8.359375 L 4.828125 8.359375 L 2.015625 10.578125 L 2.234375 10.9375 C 2.625 10.578125 3.09375 10.390625 3.40625 10.390625 C 3.859375 10.390625 4.21875 10.640625 4.515625 11.453125 L 8.15625 20.984375 L 8.734375 20.984375 Z M 17.328125 -1.1875 "></path></symbol><symbol overflow="visible" id="svg513151716365latex_01glyph2-0"><path style="stroke:none;" d=""></path></symbol><symbol overflow="visible" id="svg513151716365latex_01glyph2-1"><path style="stroke:none;" d="M 11.171875 -3.953125 L 11.171875 -5.140625 L 1.15625 -5.140625 L 1.15625 -3.953125 Z M 11.171875 -3.953125 "></path></symbol><symbol overflow="visible" id="svg513151716365latex_01glyph2-2"><path style="stroke:none;" d="M 1.09375 -9.1875 C 1.84375 -10.515625 2.65625 -11.09375 3.78125 -11.09375 C 4.96875 -11.09375 5.71875 -10.46875 5.71875 -9.25 C 5.71875 -8.15625 5.140625 -7.34375 4.265625 -6.84375 C 3.90625 -6.625 3.4375 -6.421875 2.75 -6.1875 L 2.75 -5.9375 C 3.78125 -5.9375 4.1875 -5.890625 4.59375 -5.765625 C 5.828125 -5.40625 6.46875 -4.515625 6.46875 -3.15625 C 6.46875 -1.625 5.453125 -0.390625 4.125 -0.390625 C 3.625 -0.390625 3.234375 -0.484375 2.578125 -0.953125 C 2.0625 -1.3125 1.78125 -1.421875 1.46875 -1.421875 C 1.0625 -1.421875 0.734375 -1.15625 0.734375 -0.78125 C 0.734375 -0.125 1.4375 0.25 2.75 0.25 C 4.359375 0.25 6.0625 -0.265625 6.9375 -1.421875 C 7.453125 -2.109375 7.765625 -2.984375 7.765625 -3.9375 C 7.765625 -4.875 7.46875 -5.703125 6.96875 -6.265625 C 6.59375 -6.65625 6.265625 -6.875 5.46875 -7.21875 C 6.671875 -7.9375 7.140625 -8.84375 7.140625 -9.703125 C 7.140625 -11.171875 6.015625 -12.171875 4.34375 -12.171875 C 2.46875 -12.171875 1.328125 -10.96875 0.8125 -9.25 Z M 1.09375 -9.1875 "></path></symbol><symbol overflow="visible" id="svg513151716365latex_01glyph2-3"><path style="stroke:none;" d="M 7.890625 -12.265625 L 7.71875 -12.390625 C 7.4375 -12 7.265625 -11.921875 6.859375 -11.921875 L 3.125 -11.921875 L 1.171875 -7.65625 C 1.171875 -7.65625 1.15625 -7.59375 1.15625 -7.5625 C 1.15625 -7.453125 1.203125 -7.421875 1.375 -7.421875 C 3.09375 -7.421875 4.359375 -6.84375 5.203125 -6.15625 C 6.015625 -5.515625 6.40625 -4.609375 6.40625 -3.453125 C 6.40625 -1.90625 5.234375 -0.40625 3.984375 -0.40625 C 3.625 -0.40625 3.203125 -0.578125 2.703125 -0.984375 C 2.125 -1.453125 1.78125 -1.546875 1.375 -1.546875 C 0.859375 -1.546875 0.5625 -1.3125 0.5625 -0.859375 C 0.5625 -0.1875 1.5 0.25 2.84375 0.25 C 4.0625 0.25 5.0625 -0.015625 5.90625 -0.625 C 7.125 -1.53125 7.671875 -2.640625 7.671875 -4.375 C 7.671875 -5.328125 7.5 -6.015625 7.03125 -6.65625 C 6.015625 -8.078125 5.109375 -8.484375 2.53125 -8.96875 L 3.265625 -10.5 L 6.75 -10.5 C 7.03125 -10.5 7.1875 -10.609375 7.234375 -10.734375 Z M 7.890625 -12.265625 "></path></symbol></g></defs><g id="svg513151716365latex_01_svg513151716365latex_01surface1"><g style="fill:rgb(0%,0%,0%);fill-opacity:1;"><use xlink:href="#svg513151716365latex_01glyph0-1" x="19.944" y="9.884"></use></g><g style="fill:rgb(0%,0%,0%);fill-opacity:1;"><use xlink:href="#svg513151716365latex_01glyph1-1" x="14.444" y="2.376"></use></g><path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 31.148438 2.375 L 70.476563 2.375 L 70.476563 1.1875 L 31.148438 1.1875 Z M 31.148438 2.375 "></path><g style="fill:rgb(0%,0%,0%);fill-opacity:1;"><use xlink:href="#svg513151716365latex_01glyph2-1" x="31.148" y="20.619"></use><use xlink:href="#svg513151716365latex_01glyph2-2" x="43.477856" y="20.619"></use><use xlink:href="#svg513151716365latex_01glyph2-3" x="52.477751" y="20.619"></use><use xlink:href="#svg513151716365latex_01glyph2-2" x="61.477646" y="20.619"></use></g></g></svg>. some text.</p>
You'll notice that the last word "text." follow by a dot is breaking normally, but the svg symbol before it does not.
Wrap the svg and dot in a span and add white-space:nowrap in css.
http://codepen.io/anon/pen/MbdGb
CSS