- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试图将“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 符号没有。
最佳答案
将 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;
}
关于css - 将 SVG 后跟标点符号视为一个词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41319893/
我有以下案例要解决。 在短语中突出显示关键字的 Javascript 方法。 vm.highlightKeywords = (phrase, keywords) => { keywords =
我要匹配文本中的所有美元符号单词。例如,"Hello $VARONE this is $VARTWO"可以匹配$VARONE和$VARTWO。 正则表达式应该是/\$(\w+)/g,但是当我在Dart
在 redux 中,对于将状态作为参数、更改状态并返回新状态的特定操作,您会在 switch 语句中调用什么函数? function reducer(state = DEFAULT_STATE, ac
在 MySQL 5.1 中,我将一个字段命名为“Starting”。但是,每次我使用 SQL 查询时,它都会说无效的 SQL 语法。经过一些谷歌搜索,我发现 STARTING 是一个保留的 SQL 词
我必须使用函数 isIn(secretWord,lettersGuessed) 从列表中找到密码。在下面发布我的代码。 def isWordGuessed(secretWord, lettersGue
一段时间以来,我一直无法找到两个字符串中最长的常用词。首先我想到了用“isspace”函数来做这件事,但不知道如何找到一个常用词。然后我想到了“strcmp”,但到目前为止我只能比较两个字符串。我在想
我目前正在尝试制作一种“单词混合器”:对于两个给定的单词和指定的所需长度,程序应返回这两个单词的“混合”。然而,它可以是任何类型的混合:它可以是第一个单词的前半部分与第二个单词的后半部分相结合,它可以
如果 After 之后(逗号之前)没有 -ing 词,我想匹配它。所以 After 和逗号之间不应该有 -ing 词。 所需的匹配项(粗体): After sitting down, he began
我一直在试验 Stanford NLP 工具包及其词形还原功能。我很惊讶它如何使一些词词形还原。例如: depressing -> depressing depressed -> depressed
js 并尝试根据 [这里] 中的示例代码来做词云:https://github.com/jasondavies/d3-cloud .我想做的是单词的字体大小是基于数组中单词的频率。例如我有 [a,a,
我正在处理一个文本分类问题(在法语语料库上),并且正在试验不同的词嵌入。我对 ConceptNet 提供的内容非常感兴趣,所以我决定试一试。 我无法为我的特定任务找到专门的教程,所以我听取了他们的建议
当我在文本中搜索时,我输入 C-s,然后输入单词,然后一次又一次地输入 C-s,光标前进到找到的单词的下一个位置。问题是,一旦我转到下一个单词,我无法在按钮处编辑迷你缓冲区中的搜索单词,如果我按 Ba
我正在尝试按照以下结构运行这个 maven Hello Word: ├── pom.xml └── src └── Main.java 使用pom.xml设置: 4.0.0
所以,从我可以开始的.. 我正在使用 OCR。该脚本非常适合我的需要。它检测单词的准确性对我来说还可以。 这是结果:附加图像 100% 准确。 from PIL import Image import
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。 想要改善这个问题吗?更新问题,以便将其作为on-topi
这是细节,但我想知道为什么会这样。 示例代码: Class klasa = Enum.class; for(Type t : klasa.getGenericInterfaces()) Syst
我在用: var header = ""+ "Export HTML to Word Document with JavaScript"; var footer = ""; /
我有一个程序可以像这样将数据打印到控制台(以空格分隔): variable1 value1 variable2 value2 variable3 value3 varialbe4 value4 编辑:
我有一个程序可以像这样将数据打印到控制台(以空格分隔): variable1 value1 variable2 value2 variable3 value3 varialbe4 value4 编辑:
最近我在查看与goliath相关的一些代码时,偶然在Ruby代码中看到了这个词use。 , 中间件等。看起来它不同于include/extend, and require. 有人可以解释为什么存在这个
我是一名优秀的程序员,十分优秀!