特殊字符上的奇怪换行符

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

不幸的是，关于它为什么会这样做的唯一 true 答案是在文本渲染引擎的代码中 - 在Blink或Webkit中，两者都是（主要）开源的因此，除非您碰巧看到在这个问题上实现它的人或人的眼睛，否则您将不得不寻找它们而不是希望他们浏览Stackoverflow并找到您的问题：您最好的选择是阅读{{ 3}}然后将此问题发布到他们的开发邮件列表中。

（您的问题的解决方案各不相同：删除.avatar span规则，只删除{div}父div，或者更好：使用flexbox规则）

Answer 2

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

编辑：虽然这不是对实际发生的事情的解释 - 但大多数其他非字字符都不会发生，所以＆＃34;字边界＆＃34;不是整个故事;看到评论 - 它仍然提供了一个实用的解决方法，所以我放弃了。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;