CSS网格中的文本包装问题 [英] Text Wrapping Issue in CSS Grid

问题描述

我遇到一个问题，当CSS网格中的某些字符数达到一定水平时，会将幻影线添加到其中。这是我第一次使用CSS网格，我怀疑它与网格有关。我在Chrome和Safari中看到了该问题（使用Mac OS X），但在Firefox中却没有。

I am having an issue where a ghost line is being added to some text in a CSS grid when it has a certain number of characters. This is my first time using CSS grids, and I suspect that it's related to the grid. I see the issue (using Mac OS X) in Chrome and Safari, but not in 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>

基本上幽灵线已添加到，您必须先创建一个帐户！请向网站管理员寻求帮助，从而导致< div class = col-10 col-offset-1> 与如果它有两行而不是一行。文本不在行尾附近，并且调整窗口的大小没有区别（直到它足够窄以至于实际导致换行）。如果我在短语中添加两个其他字符，则幽灵线消失。如果我继续添加字符，则幽灵线将在某些点再次出现，然后在下一个字符处再次消失。一旦我添加了足够多的文本以分成两行，该问题似乎不再发生，因此似乎只发生在单行文本中。

Basically, a ghost line is being added to You must create an account first! See site admin for help, causing the <div class="col-10 col-offset-1"> to be as tall as it would be if it had two lines instead of one. The text is nowhere near the end of the line, and resizing the window makes no difference (until it's narrow enough to actually cause a line break). If I add two additional characters to the phrase, the ghost line disappears. If I continue adding characters, the ghost line will reappear at certain points, and then disappear again with the next character. Once I add enough text to break into two lines, the issue no longer seems to occur, so it only seems to happen to single-line text.

即使该文本不在行尾附近，这似乎是行换行的问题，而且当我添加 white-space：nowrap; 时，确实消失了。

Even though the text is nowhere near the end of the line, it seems to be a line-wrapping issue, and indeed it disappears when I add white-space: nowrap;.

是什么原因造成的？是Chrome和Safari中的错误，还是我的HTML和CSS出了问题？

Any idea what's causing this? Is it a bug in Chrome and Safari, or is there something wrong with my HTML and CSS?

EDIT

由于建议进行编辑，因此添加了一个代码段来说明问题。我能够在解决问题的同时消除外部网格，因此我更新了代码以将其删除。您现在看到的是两个div，它们相同，只是一个div末尾有一个额外的句点。在我的浏览器（Chrome）中，第二个div短了，尽管它还有一个附加字符。

Thanks to a suggested edit, a code snippet has been added to illustrate the problem. I was able to eliminate the outer grid while maintaining the problem, so I updated the code to remove it. What you see now are two div which are identical except that one has an additional period at the end. In my browser (Chrome), I the second div is shorter even though it has an additional character.

EDIT 2

当我在Safari中使用代码段时，实际上得到的是问题的其他版本。如我所说，在Chrome中，它似乎是基于字符总数的。我可以添加一个字符，并且幻影线消失，然后删除该字符，并且该线重新出现。但是，使用Safari，我发现实际上只要在文本中有多个空格（无论文本有多短），就会出现幻影线。

When I play with the code snippet in Safari, I'm actually getting a different version of the problem. As I said, in Chrome, it seems to be based on the total number of characters. I can add a character and the ghost line goes away, then I delete the character and the line reappears. But with Safari, I am seeing that actually the ghost line appears any time there is more than one space character in the text, no matter how short or long the text is.

再次，Firefox完全没有问题。

Once again, Firefox is having no problem at all. It is displaying the text exactly as I expect it to.

推荐答案

空白确实得到了解释，以至于它将创建一个文本。行前和行后的空间；因此，请使用CSS white-space：nowrap;

The whitespace does get interpreted to the degree that it will create a space before and after the line; therefore, use 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>

您还可以删除>和<之间的空格。 ：

You could also remove the whitespace between > and < :

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

此外，要确保没有换行符，请用替换空格字符; ：

Furthermore to ensure no line-breaks, replace space characters with   :

<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网格中的文本包装问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！