阻止CSSGrid列溢位

我嘗試用最大高度、最大寬度來阻止列溢位，但它似乎不起作用。

我用 CSS Grid 制作了三列。一個用于導航部分，一個用于左列，一個用于右列。如螢屏截圖所示，左列部分不斷溢位導航部分和右列部分。

我正在努力實作的目標：

怎么了：

@import url("https://fonts.googleapis.com/css2?family=Asap:wght@400;700&display=swap");
* {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: #4a6163;
  font-family: "Asap";
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.main_grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 0.25fr (1fr)[2];
      grid-template-columns: 0.25fr repeat(2, 1fr);
  -ms-grid-rows: 1fr;
      grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  max-height: 100%;
  max-width: 100%;
}

.nav_section {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 1 / 1 / 1 / 2;
  border: 3px yellow solid;
}

.left_column {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 1 / 2 / 1 / 3;
  border: 1px yellow solid;
}

.right_colomn {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-area: 1 / 3 / 1 / 4;
  border: 2px blue solid;
}

.left_column > h1 {
  font-family: "Asap";
  color: #f9faf4;
  font-size: 13rem;
  font-style: normal;
  font-weight: normal;
  line-height: 15.75rem;
  text-transform: uppercase;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: red 3px solid;
  -o-object-fit: contain;
     object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

.main_bio {
  color: #f2c4ce;
  font-size: 1.75rem;
  text-decoration: underline;
}

    <main>
        <div class="main_grid">
            <div class="nav_section">
                <nav class="main_nav">
                    <a href="#">home</a>
                    <a href="#">work</a>
                    <a href="#">contact</a>
                </nav>
            </div>
            <div class="left_column">
                <h1 class="main_title">Hello, I'm Jack</h1>
            </div>
           <div class="right_colomn">
              <p class="main_bio">A 20 YEAR OLD FROM A SMALL TOWN NEAR AMSTERDAM. CURRENTLY STUDYING COMPUTER SCIENCE IN LEIDEN.</p>
           </div>
        </div>
    </main>

uj5u.com熱心網友回復：

為避免溢位，您可以將規則white-space: nowrap;用于h1. 但是，這也將避免在“你好”之后斷線。

所以我還建議<br />在Hello,for 明確打破該行之后添加一個。

這應該可以解決您的換行問題，但我注意到您還將文本旋轉了90deg，這可能會弄亂單元格內的標題。

所以我建議添加規則writing-mode: tb-rl（鏈接）使文本垂直書寫，然后將其旋轉 180 度而不是 90 度（因此它變成自下而上而不是自上而下）

這是帶有建議更改的片段

@import url("https://fonts.googleapis.com/css2?family=Asap:wght@400;700&display=swap");
* {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: #4a6163;
  font-family: "Asap";
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.main_grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 0.25fr (1fr)[2];
      grid-template-columns: 0.25fr repeat(2, 1fr);
  -ms-grid-rows: 1fr;
      grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  max-height: 100%;
  max-width: 100%;
}

.nav_section {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 1 / 1 / 1 / 2;
  border: 3px yellow solid;
}

.left_column {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 1 / 2 / 1 / 3;
  border: 1px yellow solid;
}

.right_colomn {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-area: 1 / 3 / 1 / 4;
  border: 2px blue solid;
}

.left_column > h1 {
  font-family: "Asap";
  color: #f9faf4;
  font-size: 13rem;
  font-style: normal;
  font-weight: normal;
  line-height: 15.75rem;
  text-transform: uppercase;
  /* Updated the following 3 lines */
  white-space: nowrap;
  writing-mode: tb-rl;
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: red 3px solid;
  -o-object-fit: contain;
     object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

.main_bio {
  color: #f2c4ce;
  font-size: 1.75rem;
  text-decoration: underline;
}

    <main>
        <div class="main_grid">
            <div class="nav_section">
                <nav class="main_nav">
                    <a href="#">home</a>
                    <a href="#">work</a>
                    <a href="#">contact</a>
                </nav>
            </div>
            <div class="left_column">
                <h1 class="main_title">Hello,<br/>I'm Jack</h1>
            </div>
           <div class="right_colomn">
              <p class="main_bio">A 20 YEAR OLD FROM A SMALL TOWN NEAR AMSTERDAM. CURRENTLY STUDYING COMPUTER SCIENCE IN LEIDEN.</p>
           </div>
        </div>
    </main>

標籤：html css css网格

上一篇：如何將導航欄與標題行內

下一篇：為什么當我單擊“注冊”按鈕時我的覆寫容器沒有向左移動？