Behandle SVG gefolgt von Interpunktion als ein Wort

Question

Ich versuche, jedes SVG-Symbol in einem "p" -Tag zu behandeln, auf das eine Interpunktion wie ein Punkt oder ein Fragezeichen folgt, die als ein Wort behandelt werden.

Das bedeutet, dass, wenn die Zeile bricht das ganze Symbol mit dem Punkt in die nächste Zeile geht, nicht nur den Punkt, der danach kommt.

Ich habe versucht, dies mit CSS ohne Glück zu erreichen.

hier ein codepen Beispiel ...

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> 

Sie werden bemerken, dass das letzte Wort "Text." folgt durch einen Punkt bricht normalerweise, aber das Svg-Symbol vor es nicht.

Answer 1

Wickeln Sie die SVG und den Punkt in einer Spanne und fügen Sie Leerzeichen hinzu: nowrap in css.

http://codepen.io/anon/pen/MbdGb

<p>Some Text <span class='together'><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>.<span> some text.</p> 

CSS

.together { 
    white-space:nowrap; 
}