Flexbox容器中固定高度p标签宽度不扩展问题求助

要实现固定高度的<p>标签先充分利用高度、垂直溢出时自动扩展宽度的效果，纯CSS无法直接实现（CSS不支持根据内容溢出状态动态调整宽度），可以结合JavaScript监听内容状态来调整样式：

调整后的代码 #

CSS #

.container {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 增加间距优化视觉 */
}

p {
  height: 40px;
  width: 100%; /* 默认占满容器宽度 */
  overflow: hidden; /* 初始隐藏溢出内容 */
  line-height: 20px; /* 配合40px高度，刚好容纳2行文本 */
  box-sizing: border-box;
  border: 1px solid #eee; /* 方便观察容器范围 */
}

p.expanded {
  width: fit-content; /* 溢出时自动扩展宽度 */
  overflow: visible; /* 显示全部内容 */
}

HTML #

<div class="container">
  <p>Your data</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nesciunt quam et repellendus harum possimus sequi, iusto nam tempore qui, sit quasi! Velit nisi numquam, non accusamus atque perspiciatis aperiam?</p>
  <p>WAFIjwaf oakd owad kalwd koawd sla ksa olafwa kosad </p>
  <p>afwad op wafk ag jasglksakmdfgfi efkf aioefjw oafkw alfk awijf jf dasklfskjasf ds</p>
  <p>eafifa osd okasg oeoagkesfal s;sdfpoasef ksadlf eaigjwg</p>
</div>

JavaScript #

function adjustParagraphWidth() {
  const paragraphs = document.querySelectorAll('p');
  paragraphs.forEach(p => {
    // 重置宽度确保计算准确
    p.style.width = '100%';
    const isOverflowing = p.scrollHeight > p.clientHeight;
    p.classList.toggle('expanded', isOverflowing);
  });
}

// 初始加载时执行
adjustParagraphWidth();
// 窗口尺寸变化时重新计算
window.addEventListener('resize', adjustParagraphWidth);

原理说明 #

1. 初始状态下，<p>标签宽度占满容器，文本自动换行，充分利用40px固定高度（配合line-height:20px，刚好容纳2行文本）。
2. 通过JavaScript监听窗口大小变化，对比每个<p>的滚动高度（scrollHeight）与可视高度（clientHeight）：
   • 若scrollHeight > clientHeight，说明文本垂直溢出，给<p>添加expanded类，将宽度设为fit-content，让文本自动调整宽度以适应40px高度。
   • 若未溢出，则移除expanded类，恢复占满容器宽度的状态。

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