添加文本时停止CSS Grid拉伸？答案

【问题标题】：Stop CSS Grid stretching when adding text?添加文本时停止CSS Grid拉伸？
【发布时间】：2020-09-25 14:05:42
【问题描述】：

我对 html 和 css 非常熟悉。

我创建了一个具有 8 个相等行和 2 个相等列的网格，我试图在第 5 到第 8 行/第 1 列中写一个段落，但每次我这样做时，它都会将列拉伸并推动进入右侧，使其越来越小。文本仅在整个区域的大约 95% 处开始换行（因此左列基本上几乎是整个页面）。

我尝试过使用overflow-wrap / word-break / word-wrap / min-width 等等等等。在网上查了一下，我仍然无法让它保持原样！

这是整个代码，其中包含一些扩展列的文本。感谢任何帮助！

body {
  background-color: black;
}

.mainzone {
  background-color: white;
  width: 960px;
  display: grid;
  grid-template-areas: "bannerpic bannerpic"
                       "bannerpic bannerpic"
                       "title title"
                       "syn act"
                       "rev names"
                       "rev avs"
                       "rev crit"
                       "rev stars";
  grid-template-rows: repeat(8, 1fr);
  grid-template-colums: repeat(2, 1fr);
  margin: auto;
  margin-top: 100px;
  margin-bottom: 100px;
  border-radius: 20px;
}

.bannerpic {
  grid-area: bannerpic;
  /* border: 1px black solid; */
  border-radius: 20px 20px 0px 0px;
  background-image: url("./IMG/banner.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 250px;
  width: 960px;
  margin: auto;
}

.maintitle {
  grid-area: title;
  border: 1px black solid;
}

.logo-new {
  grid-area: title;
  background-image: url("./IMG/logo1black.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: 100px;
  width: auto;
  margin: 10px 10px 0px 0px;
  background-position: right;
}

.subsyn {
  grid-area: syn;
  border: 1px black solid;
}

.subact {
  grid-area: act;
  border: 1px black solid;
}

.subavs {
  grid-area: avs;
  border: 1px black solid;

}

.review {
  grid-area: rev;
  border: 1px black solid;
}
.para {
  
}

.actors {
  grid-area: names;
  border: 1px black solid;
}

.critique {
  grid-area: crit;
  border: 1px black solid;
}

.stars {
  grid-area: stars;
  border: 1px black solid;
  background-image: url(./IMG/stars1.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="./style.css">
  <title></title>
</head>

<body>
  <div class="mainzone">
    <div class="bannerpic"></div>
    <div class="maintitle"></div>
    <div class="logo-new"></div>
    <div class="logo-old"></div>
    <div class="subsyn"></div>
    <div class="subact"></div>
    <div class="subavs"></div>
    <div class="review">
      <p class="para">this is the paragraph stretching it, i'll add some random characters. dsds sdsds dsd sd sd sdsd sd sd sds  dsd sd sdsdsd  sdsds ds dsd sd sd sd sd s<p>
    </div>
    <div class="actors"></div>
    <div class="critique"></div>
    <div class="stars"></div>

  </div>  <!-- mainzone -->

</body>
</html>

【问题讨论】：

标签： css text css-grid word-wrap

【解决方案1】：

您的问题只是一个错字：网格模板列应该是网格模板列

一些提示可以在未来提供帮助：

编辑器中的拼写检查器可以立即发现一些错误；对 CSS 等依赖字符串的代码有很大帮助。
VS Code 会警告您有关未知属性的信息。
Firefox，如果您单击 devtools 中的 CSS 图标会显示错误：

body {
  background-color: black;
}

.mainzone {
  background-color: white;
  width: 960px;
  display: grid;
  grid-template-areas: "bannerpic bannerpic"
                       "bannerpic bannerpic"
                       "title title"
                       "syn act"
                       "rev names"
                       "rev avs"
                       "rev crit"
                       "rev stars";
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: repeat(2, 1fr);
  margin: auto;
  margin-top: 100px;
  margin-bottom: 100px;
  border-radius: 20px;
}

.bannerpic {
  grid-area: bannerpic;
  /* border: 1px black solid; */
  border-radius: 20px 20px 0px 0px;
  background-image: url("./IMG/banner.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 250px;
  width: 960px;
  margin: auto;
}

.maintitle {
  grid-area: title;
  border: 1px black solid;
}

.logo-new {
  grid-area: title;
  background-image: url("./IMG/logo1black.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: 100px;
  width: auto;
  margin: 10px 10px 0px 0px;
  background-position: right;
}

.subsyn {
  grid-area: syn;
  border: 1px black solid;
}

.subact {
  grid-area: act;
  border: 1px black solid;
}

.subavs {
  grid-area: avs;
  border: 1px black solid;

}

.review {
  grid-area: rev;
  border: 1px black solid;
}
.para {
  
}

.actors {
  grid-area: names;
  border: 1px black solid;
}

.critique {
  grid-area: crit;
  border: 1px black solid;
}

.stars {
  grid-area: stars;
  border: 1px black solid;
  background-image: url(./IMG/stars1.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="./style.css">
  <title></title>
</head>

<body>
  <div class="mainzone">
    <div class="bannerpic"></div>
    <div class="maintitle"></div>
    <div class="logo-new"></div>
    <div class="logo-old"></div>
    <div class="subsyn"></div>
    <div class="subact"></div>
    <div class="subavs"></div>
    <div class="review">
      <p class="para">this is the paragraph stretching it, i'll add some random characters. dsds sdsds dsd sd sd sdsd sd sd sds  dsd sd sdsdsd  sdsds ds dsd sd sd sd sd s<p>
    </div>
    <div class="actors"></div>
    <div class="critique"></div>
    <div class="stars"></div>

  </div>  <!-- mainzone -->

</body>
</html>

【讨论】：

谢谢你，我现在觉得很傻.. 很明显！我一直在使用 Atom 进行编码，但我没有发现代码颜色的细微差别（它略微变灰而不是全白）。我会检查 VS Studio 并检查用 devtools 编码的 css 确实向我显示了错误，谢谢你的提示！
别傻了；我保留了一个名为 GOTCHA 的 Google 文档。这提醒了我所有花费我数小时的小失误或误解。