CSS Grid内容列被文本撑出网站尺寸，已尝试属性仍无效求助

在CSS Grid布局中，内容列内的文本导致该列超出网站尺寸范围。尝试使用text-overflow、text-wrap等属性修复无效，从调试用的蓝色边框能看到，视觉上文本已经在列边缘前完成换行，但列还是超出范围。

已尝试的属性：

overflow: hidden;
text-wrap: pre-line;

相关代码 #

HTML代码 #

<body>
  <main class="main-content">
    <section class="intro">
      <div class="intro-image">
        <img src="./images/Default_Beautiful_Concept_art_of_a_colorful_vibrant_crowded_ba_0_c8676a26-dadf-4751-aa00-27625fd75898_1.jpg">
      </div>
      <div class="intro-content">
        <p>
          Hey there, folks of GP and beyond! Hope you're all having a smashing day. If anything in my thread piques your interest, I believe we can make it even more fabulous together! Now, I'm not exactly a seasoned writer, though I did have my fair share of role-playing
          as a chatterbox kid (does that count?). But as a writer, I'm continually honing my craft. With each plot I dive into and every response I whip up, I can confidently say I'm getting better at this storytelling gig. Oh, by the way, I've discovered
          that I've got a penchant for playing female characters in RP. Not that I won't give male characters a whirl, mind you! But currently, my arsenal boasts more leading ladies than leading gents. However, if we're cooking up a fresh plot together,
          I'm game to play whichever gender strikes our fancy. Now, enough chit-chat; let's dive into the nitty-gritty! Preferences & Expectations: Time & Replies: I'm pretty flexible here. Whether you want to reply once a week or once a day, just give
          me a heads-up if things aren't working out. As for me, I typically aim for a response a day or every other day, but real life can throw curveballs, so I'll always keep you in the loop. Paragraphs Galore: How much we write depends on the scene
          and RP type. In a steamy, smut-filled scenario, short and sweet might be the order of the day. But when we're weaving intricate world-building tales, I'm all about those detailed, meaty responses. So, as a general rule, let's aim for more than
          just a few lines, okay? Partner Expectations: I'm all about co-creating our story. Be as creative and interactive as I am in the RP. Don't just answer; surprise me with new twists and turns! Feel free to add your own plot goodies, and don't
          fret about stepping out of the box I'll let you know if it doesn't jive. We're in this storytelling adventure together! Storytelling First: I'm not just here for a smut fest. Sure, mature themes can pop up, but the story takes the limelight
          unless we explicitly decide otherwise. Favorite RP Genres & Interests: Historical plots Sci-fi/Cyberpunk adventures Fantasy (any flavor) Slice-of-life with a sprinkle of smut (debatable, if the plot's great) Horror/Mystery (I'm intrigued, but
          it's a learning journey) ABSOLUTELY no sexual gore, scat, or extreme stuff, though! I don't commit to pairings or specific characters before diving into a plot. It's all about mood and what tickles my fancy at the time. So, if you've got an
          idea that lights my creative fire, I'm in, no matter the pairings. Check out my plots below for a taste of my style, and if you like what you see, hit me up! Oh, one more thing: if you've got your own plot in mind, take a sec to whip up an intro.
          It'll help me see what floats my boat and what I'd love to add to the mix. No offense intended, promise! Fandoms? Not my cup of tea, except for a handful of video game universes that allow for original characters: Dragon Age The Elder Scrolls
          Fallout Mass Effect Let's embark on a storytelling odyssey together!
        </p>
      </div>
    </section>
</body>

CSS代码 #

.main-content {
  display: flex;
  flex-direction: column;
}

.intro {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 50% 50%;
  column-gap: 15px;
}

.intro-image {
  border: 3px solid blue;
}

.intro-content {
  padding-right: 32px;
  border: 3px solid blue;
  overflow: hidden;
  white-space: normal;
}

.intro-image img {
  width: 100%;
  height: 100%;
}

核心成因 #

1. 网格容器总宽度溢出：使用grid-template-columns: 50% 50%定义列宽，再加上column-gap:15px，会让网格容器总宽度变为100% + 15px，直接超出父容器范围，导致整个网格撑破页面。
2. 内边距额外占用空间：intro-content的padding-right:32px是在50%列宽基础上额外添加的，进一步挤压可用空间，加剧溢出问题。
3. 文本换行并非问题根源：你看到的文本换行是正常的，但网格容器本身的溢出让列看起来“超出网站尺寸”。

解决方法 #

方法1：用fr单位替代百分比 #

fr单位会自动扣除间隙宽度，再平分剩余空间，不会出现总宽度溢出：

.intro {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 替换原50% 50% */
  column-gap: 15px;
}

方法2：用calc()手动计算列宽 #

如果坚持用百分比，需要把间隙宽度平分到每一列的宽度计算中：

.intro {
  margin-top: 32px;
  display: grid;
  grid-template-columns: calc(50% - 7.5px) calc(50% - 7.5px); /* 平分15px间隙 */
  column-gap: 15px;
}

额外优化：让内边距不增加元素总宽度 #

给intro-content添加box-sizing: border-box，使内边距和边框计入元素宽度，避免进一步挤压空间：

.intro-content {
  box-sizing: border-box;
  padding-right: 32px;
  border: 3px solid blue;
  overflow: hidden;
  white-space: normal;
}

内容的提问来源于stack exchange，提问作者Emerald Wolf