CSS网格-不必要的断字 [英] CSS Grid - unnecessary word break

问题描述

我对CSS网格有疑问.

I have a problem with CSS grid.

在从代码库中提取的以下代码段中，我有一个非常简单的HTML结构，带有网格布局.内容设置为断字，以防止文本溢出.事件虽然有足够的空间使文本不会折断，但确实会在最后一个字母之前创建换行符.

In the following snippet extracted from the codebase, I have a very simple HTML structure with grid layout. Content is set to break-word to prevent text from overflowing. Event though there is enough space for the text to NOT get broken, it does create a line break just before the last letter.

我的理解是，在网格布局中，默认情况下，计算项目时要尽可能适合内容，而在本示例中情况并非如此.

My understanding was that in grid layout, by default, items are calculated to fit the content as much as possible, which is somehow not the case in this example.

从内容或网格项的边距中删除填充确实解决了此问题，但是边距用于居中并且还需要填充.

Removing padding from content or margins from grid item does solve the issue, but margin is there for centering and padding is also needed.

是否有我必须或可以用来解决此问题的属性?

Is there any property I have to or can use to solve this problem?

P.S.据我所知，该错误在Firefox中不存在，到目前为止，我已经在Chrome和Safari中找到了该错误.

P.S. To my knowledge, the bug is not present in Firefox, I have found it in Chrome and Safari so far.

.grid {
  display: grid;
  grid-template-columns: auto;
}

.item {
  margin: 0 auto;
}

p {
  word-break: break-word;
  padding: 0 4%;
}

<div class="grid">
  <div class="item">
    <p>HOTEL</p>
    <p>GRAND</p>
  </div>
</div>

推荐答案

这不是bug，而是 complex 计算.

It's not a bug but a complex calculation.

有一种循环可以计算导致问题的元素的最终宽度.首先考虑到内容(根据您使用的属性进行收缩以适应行为)来计算宽度，然后将百分比值与填充一起使用将考虑计算出的宽度 ¹ .最后，我们将从创建单词break的宽度中减少计算出的填充.

There is a kind of cycle to calculate the final width of the element which create the issue. The width is first calculated considering the content (a shrink-to-fit behavior based on the properties you used) then using percentage value with padding will consider the calculated width¹. At the end, we will reduce the calculated padding from the width creating the word break.

这将以最小值发生，因为在所有情况下，宽度始终小于包含最长单词的宽度:

This will happen with the smallest value since in all the cases the width will always be less than the needed width to contain the longest word:

.grid {
  display: grid;
  grid-template-columns: auto;
}
.item {
  margin:auto;
  border:1px solid;
}
.pad p {
  word-break: break-word;
  padding: 0 1%;
}

<div class="grid">
  <div class="item">
    <p>HOTEL</p>
    <p>I_WILL_FOR_SURE_BREAK</p>
  </div>
</div>

<div class="grid">
  <div class="item pad">
    <p>HOTEL</p>
    <p>I_WILL_FOR_SURE_BREAK</p>
  </div>
</div>

如您所见，第一个带有填充的网格被缩小到其内容，第二个网格具有完全相同的宽度，并且填充创建了换行符.

As you can see, the first grid with padding is shrinked to its content and the second grid is having exactly the same width and the padding is creating the line break.

一个简单的解决方法是在知道所需值的情况下使用像素值而不是百分比:

An easy fix is to use pixel value instead of percentage in case you know the value you want:

.grid {
  display: grid;
  grid-template-columns: auto;
  justify-content:center;
}

.item {
  margin:auto;
  border:1px solid;
}

.pad p {
  word-break: break-word;
  padding: 0 20px;
}

<div class="grid">
  <div class="item">
    <p>HOTEL</p>
    <p>I_WILL_NOT_BREAK</p>
  </div>
</div>

<div class="grid">
  <div class="item pad">
    <p>HOTEL</p>
    <p>I_WILL_NOT_BREAK</p>
  </div>
</div>

为什么您在firefox上看不到它?

仅是因为那里不支持break-word( https ://developer.mozilla.org/en-US/docs/Web/CSS/word-break )

Simply because break-word is not supported there (https://developer.mozilla.org/en-US/docs/Web/CSS/word-break)

所以您将有一个溢出而不是一个字中断.如果使用break-all，您可能会在firefox上注意到此行为:

So you will have an overflow instead of a word break. You may notice this behavior on firefox if you use break-all:

.grid {
  display: grid;
  grid-template-columns: auto;
}
.item {
  margin:auto;
  border:1px solid;
}
p {
  word-break: break-all;
  padding: 0 1%;
}

<div class="grid">
  <div class="item">
    <p>HOTEL</p>
    <p>I_WILL_FOR_SURE_BREAK</p>
  </div>
</div>

¹ :相对于包含块的宽度的填充大小(以百分比表示).

¹: The size of the padding as a percentage, relative to the width of the containing block.^ref

这篇关于CSS网格-不必要的断字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！