如何在HTML Grid布局中处理超长无空格文本？

问题场景 #

用display: grid实现两列布局，第一列设为1fr自适应宽度，第二列固定380px：

<div id="two-column-structure">
    <div></div>
    <div></div>
</div>

div.two-column-structure {
    display: grid;
    grid-template-columns: 1fr 380px;
}

当第一列输入无空格的超长文本时，布局出现水平溢出，页面错乱。尝试添加text-overflow: ellipsis、overflow: hidden后，省略号仍不显示。

原因分析 #

1. Grid列宽被撑开：默认1fr等价于minmax(auto, 1fr)，auto会让列优先适应内容宽度，超长无空格文本会直接撑宽列，导致布局溢出。
2. 省略号生效条件不足：text-overflow: ellipsis需要同时满足三个条件：overflow: hidden、white-space: nowrap、元素有确定的宽度限制，缺少任一条件都会导致省略号不显示。

解决方案 #

核心修改点 #

1. 限制Grid列的最小宽度：将grid-template-columns中的1fr改为minmax(0, 1fr)，强制第一列最小宽度为0，优先占用可用空间，不再被内容撑开。
2. 补全省略号所需样式：给第一列容器添加white-space: nowrap（单行时），配合overflow: hidden和text-overflow: ellipsis实现省略效果；若需多行省略，使用多行截断方案并添加单词断开属性。

完整代码示例 #

CSS代码

/* 单行省略的固定布局 */
.two-column-single-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  padding: 12px;
  border: 1px solid #333;
  margin-bottom: 15px;
}

.two-column-single-line div {
  padding: 10px;
}

.two-column-single-line div:first-child {
  border: 1px solid blue;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 多行省略的备选布局 */
.two-column-multi-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  padding: 12px;
  border: 1px solid #333;
}

.two-column-multi-line div:first-child {
  border: 1px solid blue;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 控制显示行数 */
  -webkit-box-orient: vertical;
  word-break: break-all; /* 断开超长无空格文本 */
}

HTML代码

<!-- 单行省略示例 -->
<div class="two-column-single-line">
  <div>slkdjflksdjfksajd;lkfaj;sldkjfa;lskdjflaksdkjghakljdfshgksldjfhgklsjdfhlgksjdfhgklsjdhflkgsjdhflkgsjhldfkjghskldjfhgskljdfhgksldhfgklsjdfhgklsjdhfgkjlshdfg</div>
  <div>Right Column</div>
</div>

<div class="two-column-single-line">
  <div>Without long words it works fine but if there is no space in between it gets overflowed. What can I do for the same. I have used max-width, min-width, text-overflow and overflow which can be showed in two-column-i-tried class div</div>
  <div>Right Column</div>
</div>

<!-- 多行省略示例 -->
<div class="two-column-multi-line">
  <div>slkdjflksdjfksajd;lkfaj;sldkjfa;lskdjflaksdkjghakljdfshgksldjfhgklsjdfhlgksjdfhgklsjdhflkgsjdhflkgsjhldfkjghskldjfhgskljdfhgksldhfgklsjdfhgklsjdhfgkjlshdfg</div>
  <div>Right Column</div>
</div>

关键说明 #

• minmax(0, 1fr)：彻底解决Grid列被超长文本撑开的问题，让第一列始终在可用空间内收缩。
• 单行省略必须设置white-space: nowrap，否则文本换行后省略号无法触发。
• 多行省略使用-webkit-line-clamp（兼容webkit内核浏览器），配合word-break: break-all确保超长无空格文本能被断开，避免溢出。

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