inline-block子元素文本溢出的原因及解决方法

问题原因 #

1. 父容器.experience1设置了white-space: nowrap，强制所有inline/inline-block子元素在同一行强制显示，不会根据容器宽度自动换行。
2. 子元素.exper-date（固定160px）和.exper-review（固定700px+50px左外边距）的总宽度很容易超过父容器的100%宽度，导致整个内容溢出父容器范围。
3. .exper-review的text-overflow: ellipsis未生效——这个属性生效需要同时满足overflow: hidden和white-space: nowrap，当前代码缺少这两个关键设置，而且父容器的nowrap反而让子元素整体不换行，进一步加剧溢出问题。

可行解决办法 #

办法1：取消强制同行，让内容自动换行

去掉父容器的white-space: nowrap，当容器宽度不足时，.exper-review会自动换行到下一行，彻底避免溢出：

.experience1 {
  /* 移除white-space: nowrap */
  width: 100%;
}

.exper {
  display: inline-block;
  background-color: blue;
}

.exper-date {
  background-color: aqua;
  vertical-align: top;
  width: 160px;
}

.exper-review {
  background-color: beige;
  margin-left: 50px;
  width: 700px;
  /* 若需要单行文本省略，添加以下属性 */
  /* white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
}

.exper h4 {
  margin: 0px;
}

.exper p {
  margin: 0;
}

办法2：改用Flex布局实现自适应同行显示

用flex替代inline-block，让两个子元素自适应容器宽度，避免溢出：

.experience1 {
  display: flex; /* 改为flex布局 */
  gap: 50px; /* 用gap替代margin-left，布局更规范 */
  width: 100%;
}

.exper {
  /* 移除display: inline-block */
  background-color: blue;
}

.exper-date {
  background-color: aqua;
  width: 160px;
  flex-shrink: 0; /* 固定宽度，不被压缩 */
}

.exper-review {
  background-color: beige;
  flex: 1; /* 占据容器剩余所有空间 */
  overflow: hidden; /* 隐藏溢出内容 */
}

/* 若需要内部文本单行省略，给对应元素添加样式 */
.exper-review p, .exper-review h4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exper h4 {
  margin: 0px;
}

.exper p {
  margin: 0;
}

（HTML无需修改，仅需去掉.exper-review的margin-left:50px，用flex的gap替代即可）

办法3：保留inline-block，允许容器横向滚动

如果必须保留inline-block和同行显示，给父容器添加横向滚动，同时支持内部文本省略：

.experience1 {
  white-space: nowrap;
  width: 100%;
  overflow-x: auto; /* 添加横向滚动条 */
}

.exper {
  display: inline-block;
  background-color: blue;
  vertical-align: top; /* 统一子元素对齐方式 */
}

.exper-date {
  background-color: aqua;
  width: 160px;
}

.exper-review {
  background-color: beige;
  margin-left: 50px;
  width: 700px;
  white-space: normal; /* 取消强制单行，让内部文本自动换行 */
  /* 若需要单行省略，改为：
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
}

.exper h4 {
  margin: 0px;
}

.exper p {
  margin: 0;
}

内容的提问来源于stack exchange，提问作者Văn Lộc Trần