如何使文本在固定45px高度容器内自动换行以最小化宽度？

首先明确：原生CSS无法直接实现「固定高度下自动计算最小宽度」的需求，因为CSS的布局逻辑是先确定宽度再推导高度，反向的自适应逻辑目前没有原生属性支持。

尝试CSS方案（有限场景适用） #

如果文本中的最长单词在45px高度内能完全容纳（即最长单词宽度下，文本行数不超过45px能承载的行数），可以尝试以下代码，让容器宽度取最长单词的宽度（min-content），同时允许单词内换行避免溢出：

p {
  height: 45px;
  font-size: 8pt;
  line-height: 1.15;
  border: 1px solid black;
  display: inline-block;
  overflow-wrap: break-word; /* 允许长单词换行 */
  width: min-content;
  max-height: 45px;
  overflow: hidden; /* 防止极端情况溢出，可选 */
}

但如果最长单词宽度下文本高度超过45px，这个方案会失效，文本仍会溢出容器。

JS方案（通用可行） #

如果必须实现任意文本场景下的需求，JS是可靠的选择，无需逐一遍历所有宽度，用二分查找可以高效找到最小宽度：

实现思路 #

1. 计算容器能容纳的最大行数（基于固定高度和行高）
2. 通过二分查找，快速定位最小的宽度值，使得文本在该宽度下的高度不超过45px

代码示例 #

const textElement = document.querySelector('p');
const lineHeight = parseFloat(getComputedStyle(textElement).lineHeight);
const maxContainerHeight = 45;

// 初始化二分查找的边界
let minWidth = 1;
let maxWidth = textElement.scrollWidth; // 文本不换行时的宽度
let optimalWidth = maxWidth;

// 二分查找核心逻辑
while (minWidth <= maxWidth) {
  const currentWidth = Math.floor((minWidth + maxWidth) / 2);
  textElement.style.width = `${currentWidth}px`;
  
  // 检查文本是否溢出容器
  const isOverflow = textElement.scrollHeight > maxContainerHeight;
  
  if (isOverflow) {
    // 宽度太小，需要增大
    minWidth = currentWidth + 1;
  } else {
    // 当前宽度可行，尝试更小的宽度
    optimalWidth = currentWidth;
    maxWidth = currentWidth - 1;
  }
}

// 设置最终的最小宽度
textElement.style.width = `${optimalWidth}px`;

这个方法的效率远高于逐行尝试，尤其适合长文本场景。

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