Text Wrapping Issue in CSS Grid

问题

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>

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.

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

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

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

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.

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

回答1:

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>

来源：https://stackoverflow.com/questions/47704097/text-wrapping-issue-in-css-grid

标签

css

css3

css-grid