CSS Grid中overflow:hidden/ellipsis失效问题求助

问题根源 #

1. Grid网格项（如你的#tallarticle）默认min-width: auto，会优先适配内容宽度，导致容器无法被网格分配的区域限制，文本自然不会触发溢出。
2. .articletext缺少文本换行控制的关键属性，text-overflow: ellipsis需要配合特定换行规则才能生效。

修复步骤 #

1. 给网格项添加收缩允许

给包含文本的网格项（#tallarticle）设置min-width: 0，让它能收缩到网格分配的宽度范围内：

#tallarticle {
  min-width: 0; /* 允许网格项被网格区域限制，而非被内容撑开 */
}

2. 补充文本溢出的必要样式

• 单行文本省略：添加white-space: nowrap强制文本不换行：

.articletext {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 关键：单行显示文本 */
  min-width: 0;
}

• 多行文本省略（注意-webkit前缀的兼容性）：

.articletext {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 指定显示行数 */
  -webkit-box-orient: vertical;
  min-width: 0;
}

完整示例代码 #

CSS

.grid {
  display: grid;
  height: 100vh;
  width: 100vw;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 1fr 1fr 1fr;
  grid-template-areas: "nav nav nav nav" "tallarticle largecomic largecomic smallarticle1" "tallarticle largecomic largecomic smallarticle2" "article1 article2 article3 article4";
  grid-gap: 0.2rem;
  font-size: 20px;
  color: aliceblue;
}

#tallarticle {
  min-width: 0;
}

.articletext {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 单行省略用这个，多行替换成对应属性 */
  min-width: 0;
}

HTML

<div class="grid">
  <nav>
    Comment
  </nav>
  <div id="tallarticle">
    <h2> Matthew Parris </h2>
    <h1> Our shortage of social housing is a disgrace</h1>
    <div class="articletext">
      (INSERT BIG ARTICLE HERE FOR OVERFLOW)
    </div>
  </div>
  <div id="largecomic">
    <img id="comicimg" src="comic.jpg">
  </div>
  <div id="smallarticle1">smallArticle1</div>
  <div id="smallarticle2">smallArticle2</div>
  <div id="article1">Article1</div>
  <div id="article2">Article2</div>
  <div id="article3">Article3</div>
  <div id="article4">Article4</div>
</div>

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