特殊字符上的奇怪换行符

Question

问题

我最近在后端发现了一个编码问题，当第一个字母是德语字母（例如Ö和Ä ）时计算用户的首字母。 这些信件无法解析，最终成为问号。

但我还发现，在我的标记中，一种相当特殊的行为（以及我寻求建议的原因）对我来说根本就没有任何意义。

我已经复制了以下简化示例：

 ul { padding: 0; display: flex; } li { list-style-type: none; font-family: 'Roboto', sans-serif; flex-direction: column; margin: 15px; width: 260px; min-height: 200px; padding: 30px 15px; text-align: center; background: white; border: 1px solid #E8E8E8; } .avatar { height: 35px; width: 35px; border: 2px solid #333; line-height: 35px; padding: 1px 2px; align-self: auto; margin: 10px auto 0; position: relative; } .avatar span { left: 50%; position: absolute; transform: translateX(-50%); } 

 <ul> <li> <div class="avatar"> <span>?N</span> </div> <h4>Örjan Norberg</h4> <span>orjan@example.com</span> </li> <li> <div class="avatar"> <span>II</span> </div> <h4>Isaac Ibarra</h4> <span>isaac@example.com</span> </li> <li> <div class="avatar"> <span>WW</span> </div> <h4>Wyatt Williams</h4> <span>wyatt@example.com</span> </li> </ul> 

你会看到“Örjans”的首字母是?N ，而且“N”正被推到下一行。 这似乎与头像宽度无关，因为我尝试了长短缩写。

事实上，即使我把WWWWW或其他东西（ pic ）溢出了头像，也没有像预期的那样的换行符。 我还尝试了其他特殊字符，例如&和% ，但这些字符的行为与任何其他字符或字母一样。

---

题

具体使用问号时会导致这种行为的原因是什么？ 它是以某种方式与字体相关（ Roboto ）还是我的CSS？

另外，（见下面的图片）当问号后跟一个字母时，怎么会发生这种情况，但是当订单被颠倒（字母优先）或者后面跟着另一个问号时呢？

这里发生了什么？？

---

编辑1：使用OSX / Chrome.v59，虽然可以在Windows7 / IE11中复制

编辑2：显然—字符也会导致这种行为 （感谢@MrLister找到这个）

Answer 1

您看到的是组合的边界客户端矩形?N太宽而不适合没有溢出，因此浏览器会根据默认规则和CSS覆盖执行任何在看到溢出时应该执行的操作。 部分原因是translate和scale变换不会重新定位元素，它们只会在其他地方绘制它们，因此您的变换不会抵消您的绝对定位。 看看http://jsbin.com/gujafokiwe/edit?html,css,output并注意到，就DOM而言，跨度仍处于原始位置时 ，我们只告诉CSS将其绘制到某个地方其他。

当浏览器看到?N （特别是：某些浏览器。并非所有浏览器）时，它可能会看到它需要根据边界客户端矩形维度来破坏该行。 但是，浏览器可以自由选择何时以及如何中断文本序列的规则（CSS 没有指定 必须使用哪些规则，只有在CJK之外的unicode内容中，建议使用http://www.unicode.org /reports/tr14/tr14-37.html ）虽然您的示例在我的Firefox中工作正常，但根本没有破坏文本，我的Chrome确实看到溢出，并且确实尝试按照它知道的最佳方式分解序列如何。

不幸的是，关于它为什么会这样做的唯一真正的答案是文本渲染引擎的代码 - 无论是在Blink中还是在Webkit中，这两者都是（主要）开源的，所以除非你碰巧看到了在这个问题上实现它的人或者人，你将不得不寻找他们，而不是希望他们浏览Stackoverflow并找到你的问题：你最好的选择是阅读http://www.chromium.org/blink#参与 ，然后将此问题发布到他们的开发邮件列表中。

（您的问题的解决方案是多种多样的：删除.avatar span规则，只删除text-align: center父div，甚至更好：使用flexbox规则）

Answer 2

的？ 在第一个跨度是一个分词机会; 毕竟，N是一个词的开头。 这在其他跨度中不会发生，因为它们仅包含整个单词。 所以你应该做的是将white-space: nowrap到跨度，以便它不再包裹。

编辑：虽然这不是对实际发生的事情的解释 - 大多数其他非单词字符也不会发生这种情况，因此“单词边界”不是整个故事; 看到评论 - 它仍然提供了一个实用的解决方法，所以我离开了。

 ul { padding: 0; display: flex; } li { list-style-type: none; font-family: 'Roboto', sans-serif; flex-direction: column; margin: 15px; width: 260px; min-height: 200px; padding: 30px 15px; text-align: center; background: white; border: 1px solid #E8E8E8; } .avatar { height: 35px; width: 35px; border: 2px solid #333; line-height: 35px; padding: 1px 2px; align-self: auto; margin: 10px auto 0; position: relative; } .avatar span { left: 50%; position: absolute; transform: translateX(-50%); white-space:nowrap; } 

 <ul> <li> <div class="avatar"> <span>?N</span> </div> <h4>Örjan Norberg</h4> <span>orjan@example.com</span> </li> <li> <div class="avatar"> <span>II</span> </div> <h4>Isaac Ibarra</h4> <span>isaac@example.com</span> </li> <li> <div class="avatar"> <span>WW</span> </div> <h4>Wyatt Williams</h4> <span>wyatt@example.com</span> </li> </ul>