CSS技术需求：实现文本不换行+溢出隐藏，同时保留左右20px内边距

需求明确：文本不换行（用white-space: nowrap）、超出部分隐藏（用overflow: hidden），且容器左右必须留20px内边距。你当前的代码问题出在把不换行和溢出隐藏的样式加在了父容器.col上，导致整个列的内容被强制放在一行，同时没正确控制内部文本的溢出行为。

以下是修正后的代码：

.row {
  display: flex;
  gap: 10px;
}

.col {
  background: blue;
  padding: 0 20px; /* 保留左右20px内边距 */
  flex-grow: 1;
}

.col:nth-child(2) {
  background: red;
}

.col p {
  white-space: nowrap; /* 文本不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  margin: 0; /* 清除p标签默认上下外边距，避免布局间距干扰 */
}

<div class="row">
  <div class="col">
    <p>1a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris felis orci, tempor vehicula pretium vel, commodo et elit. Donec vitae lacinia turpis. Nulla scelerisque, augue a pulvinar elementum, sapien elit porta ex, et aliquet nisi felis vitae nunc. Morbi aliquam mollis arcu a ultrices. Integer accumsan sapien eros, a posuere mauris hendrerit et. Curabitur interdum scelerisque mattis. Quisque a erat metus. Donec sit amet efficitur lacus. Morbi sodales, nulla imperdiet volutpat porta, justo massa sagittis nisl, nec lacinia magna purus ac nisl. Duis ultrices, est sit amet cursus rutrum, nisl lacus consectetur lectus, at pretium nulla massa non erat</p>
    <p>1b Cras commodo ultricies mi. Vivamus quis ex imperdiet, pharetra mauris vitae, mattis justo. Aenean eget ultrices magna. Suspendisse rutrum tristique dolor quis porttitor. Aliquam pulvinar vulputate lacinia. Donec dictum efficitur ipsum, quis ullamcorper dui tincidunt sollicitudin. Phasellus tristique bibendum tincidunt. Phasellus sagittis vehicula ligula, ac sollicitudin velit condimentum maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus lectus nisi, non dictum sapien ullamcorper in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</p>
  </div>
  <div class="col">
    <p>2a Cras tristique diam a aliquet sollicitudin. Donec vehicula dui ipsum, eget imperdiet neque porta nec. Donec vestibulum iaculis arcu imperdiet malesuada. Sed mattis ex eu ipsum bibendum, lobortis condimentum urna maximus. Integer vehicula ipsum lacus. Pellentesque vel lacus felis. In sed interdum eros. Fusce et scelerisque mauris. Donec vel egestas elit. Maecenas in ligula ac ipsum tempus hendrerit. Pellentesque quis lacinia augue. Integer vehicula nisi rutrum, egestas eros id, euismod nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo tortor, bibendum ornare turpis vel, fermentum tempus enim</p>
    <p>2b Nulla nec tempor felis. Donec auctor, leo sed vehicula egestas, nunc dui pharetra lorem, sit amet consequat risus dolor ac velit. Aenean tempus semper sapien, sollicitudin sagittis enim tristique nec. Mauris leo lacus, maximus ut convallis quis, pretium a ipsum. Aenean vel finibus urna. Donec dolor nunc, tincidunt et turpis quis, scelerisque euismod purus. Donec eu hendrerit sem. Vestibulum sed sodales lectus, vel semper lorem. Nunc sit amet est purus</p>
  </div>
</div>

关键调整说明： #

• 将white-space: nowrap和overflow: hidden从.col移到.col p上，让每个段落单独实现不换行和溢出隐藏，而非整个列的内容强制在一行。
• 清除<p>标签默认的上下外边距（margin:0），避免段落间或与容器的间距干扰内边距效果。
• .col保留padding:0 20px，确保文本与容器左右边缘始终有20px距离，同时flex-grow:1保证两列平分可用宽度。

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