Question

我遇到的问题是，当CSS网格中有一定数量的字符时，会在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;时它确实消失了。

知道是什么导致了这个吗？这是Chrome和Safari中的错误，还是我的HTML和CSS出了问题？

修改

由于建议编辑，我们添加了一个代码段来说明问题。我能够在保持问题的同时消除外部网格，因此我更新了代码以将其删除。你现在看到的是两个div是相同的，除了一个在结尾有一个额外的句号。在我的浏览器（Chrome）中，即使它有一个额外的字符，我的第二个div也会更短。

编辑2

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

再一次，Firefox完全没有问题。它正如我所期望的那样显示文本。

Answer 1

空格确实被解释为它将在行之前和之后创建空间的程度;因此，请使用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>

你也可以删除＆gt;之间的空格。和＆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>

CSS网格中的文字环绕问题

1 个答案: