时间戳

首页 > 解决方案 > 添加文本时停止CSS Grid拉伸？

css - 添加文本时停止CSS Grid拉伸？

问题描述

我对 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>

标签： csstextcss-gridword-wrap

解决方案

您的问题只是一个错字： grid-template-colums 应该是 grid-template-columns

一些提示以帮助将来：

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

显示未知属性的 Firefox 开发者工具

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>

推荐阅读