CSS网格中的文本包装问题

Question

我遇到一个问题，其中幽灵线在具有一定数量的字符时将其添加到CSS网格中的某些文本中。这是我第一次使用CSS网格，我怀疑它与电网有关。我在Chrome和Safari中看到了这个问题（使用Mac OS X），但没有在Firefox中。

.grid {
  display: grid;
  border: 1px solid black;
}
.grid > .row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.col-10 {
  grid-column-end: span 10;
}
.blue {
  background-color: blue;
}

<div class="grid">
  <div class="row">
    <div class="blue col-10">
      You must create an account first! See site admin for help.
    </div>
  </div>
</div>
<div class="grid">
  <div class="row">
    <div class="blue col-10">
      You must create an account first! See site admin for help..
    </div>
  </div>
</div>

基本上，正在将幽灵线添加到You must create an account first! See site admin for help中，导致<div class="col-10 col-offset-1">的高度，如果有两行而不是一条线。文本远不及行的末端，并且调整窗口的大小没有区别（直到它足够狭窄以实际引起换行符）。如果我在短语中添加两个其他字符，则幽灵线消失。如果我继续添加字符，则幽灵线将在某些点重新出现，然后在下一个字符中再次消失。一旦我添加了足够的文本以分为两行，似乎不再发生问题，因此似乎只会发生单行文本。

即使文本远不及行的末端，它似乎是一个包裹的问题，当我添加 white-space: nowrap;时，它确实消失了。

知道是什么原因造成的？这是铬和野生动物园中的错误，还是我的HTML和CSS有问题？

---

编辑

多亏了建议的编辑，添加了代码段来说明问题。我能够在保留问题时消除外部网格，因此我更新了代码以将其删除。您现在看到的是两个Div，除了最后一个时期还有一个额外的时期。在我的浏览器（Chrome）中，我的第二个div较短，即使它具有其他字符。

---

编辑2

当我在Safari中使用代码片段时，我实际上会得到其他问题的不同版本。正如我所说，在Chrome中，它似乎是基于字符总数。我可以添加一个角色，然后幽灵线消失，然后删除角色，并重新出现。但是有了Safari，我看到实际上在文本中有多个空间字符时，幽灵线实际上出现了，无论文本多短或长时间。

再次，Firefox根本没有问题。它正与我期望的那样显示文本。

Answer 1

whitespace的确会在线路之前和之后创建一个空间的程度。因此，使用CSS white-space: nowrap;

<div class="full-screen grid">
  <div class="row">
    <div class="align-center padded full-width text-center grid">
      <div class="row">
        <div class="col-10 col-offset-1" style="white-space: nowrap;">
          You must create an account first! See site admin for help.
        </div>
      </div>
    </div>
  </div>
</div>

您也可以在>和＆lt之间删除空格；：

<div class="full-screen grid">
  <div class="row">
    <div class="align-center padded full-width text-center grid">
      <div class="row">
        <div class="col-10 col-offset-1">You must create an account first! See site admin for help.</div>
      </div>
    </div>
  </div>
</div>

此外，要确保没有线路破坏，请用 替换空格字符：

<div class="full-screen grid">
  <div class="row">
    <div class="align-center padded full-width text-center grid">
      <div class="row">
        <div class="col-10 col-offset-1">You&nbsp;must&nbsp;create&nbsp;an&nbsp;account&nbsp;first!&nbsp;See&nbsp;site&nbsp;admin&nbsp;for&nbsp;help.</div>
      </div>
    </div>
  </div>
</div>