如何在CSS网格项溢出时强制填充权限? [重复]

问题描述 投票:1回答:1

这个问题在这里已有答案:

我正在尝试使用最少的标记和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”的问题在于您无法为该项目实际设置一些余量。

css padding css-grid
1个回答
0
投票

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

为了考试给.item财产word-break: break-all;

© www.soinside.com 2019 - 2024. All rights reserved.