css - 将 SVG 后跟标点符号视为一个词

Question

我试图将“p”标签中后跟标点符号(如点或问号)的任何 SVG 符号视为一个词。

意思是，当换行时，带点的整个符号转到下一行，而不仅仅是它后面的点。

我试图用 CSS 实现这一点，但没有成功。

这是一个 codepen 示例 ...

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>

您会注意到最后一个词“文本”。后面跟着一个点是正常中断，但它之前的 svg 符号没有。

Answer 1

将 svg 和点包裹在一个 span 中，并在 css 中添加 white-space:nowrap。

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;
}