Question

我正在尝试使用最少的标记和CSS获得一个居中的对话框内容，我几乎可以使用以下代码（您可以在CodePen中尝试使用https://codepen.io/rosenfeld/pen/Rxgwrq）：

#container {
  display: grid;
  padding: 1em;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background-color: white;
  align-content: center;
  justify-content: center;
}

#item {
  text-align: justify;
  font-size: 20px;
  text-shadow: 1px 1px lightblue;
  max-width: 400px;
  background-color: lightyellow;
  padding: 1em;
  overflow: auto;
}

h1 { text-align: center; color: darkred; }
a { color: darkred}

<html>
  <head>
    <title>404 - Not Found</title>
  </head>
  <body>
    <div id=container >
      <div id=item>
        <h1>404</h1>
        Sorry, the page you are looking for does not exist. You may want to navigate to our <a href="/">main page</a>. If you just clicked on a broken link, please get in touch so we can fix it.
      </div>
    </div>
  </body>
</html>

我发现的唯一问题是，当内容溢出时，不会遵守项目的正确填充。尝试缩小窗口宽度以强制显示水平滚动条，您会注意到项目填充权限被完全忽略。

是否可以在不更改标记的情况下修复此问题，或者在CSS中使用：before和：after伪选择器？

P.S。：我实现这一点的第一次尝试是使用Flexbox，但我发现网格布局似乎没有发生过几个问题。例如，对于Flexbox，我被迫对项目使用“margin：auto”而不是对齐属性，因为它们会使顶部内容消失。另一个区别是，对于网格布局，底部填充是受到尊重的，唯一的问题是正确的填充（例如，更新：在Chrome中，但在Firefox中没有，因此这在浏览器中不一致）。与使用Flexbox相比，使用CSS网格可以让我更接近我想要的更少和更清晰的代码。此外，使用“margin：auto”的问题在于您无法为该项目实际设置一些余量。

Answer 1

这是因为换行符不能破坏这个词。如果它不合适，它的一部分就在填充的“领域”。

要考试，请提供.item财产word-break: break-all;。

如何在CSS网格项溢出时强制填充权限？

1 个答案: