html - 特殊字符的奇怪换行符

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: 显然 — 字符 also causes this behavior (感谢@MrLister 找到了这个)

Answer 1

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

当浏览器看到 ?N(特别是:某些浏览器。不是所有浏览器)时，它可能会发现它需要根据边界客户端矩形尺寸来断线。然而，浏览器可以自由选择何时以及如何打破文本序列的规则(CSS does not specify 哪些规则必须被使用，只有对于 CJK 之外的 unicode 内容，建议使用 http://www.unicode.org/reports/tr14/tr14-37.html )并且同时您的示例在我的 Firefox 中运行良好，根本没有破坏文本，我的 Chrome 确实看到了溢出，并且确实尽可能地尝试分解序列。

不幸的是，关于为什么这样做的唯一真实答案是在文本渲染引擎的代码中——要么在 Blink 中，要么在 Webkit 中，它们(大部分)都是开源的，所以除非你碰巧在这个问题上得到了实现它的人的注意，否则你将不得不寻找他们而不是希望他们浏览 Stackoverflow 并找到你的问题:你最好的选择是通读 http://www.chromium.org/blink#participating 和然后将这个问题发布到他们的开发邮件列表。

(针对您的问题的解决方案多种多样:删除 .avatar span 规则，仅使用 text-align: center 父 div，或者更好:使用 flexbox 规则)