如何通过CSS实现文本仅换行两次且字号最大化？

要让固定宽高容器内的文本仅换行两次（即分成两行）同时字号尽可能大，可以通过以下CSS设置实现：

核心思路 #

1. 用网格布局让文本在容器内居中对齐
2. 借助text-wrap: balance优化换行逻辑，让内容均匀分布在两行
3. 通过clamp()函数结合容器尺寸计算最大可行字号，同时设置安全范围
4. 配合合适行高，确保两行文本完全容纳在容器内

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
div{
  width:250px;
  height:125px;
  padding:10px;
  background-color:yellow;
  border:1px solid black;
  /* 核心新增样式 */
  display: grid;
  place-content: center;
  text-wrap: balance;
  line-height: 1.2;
  font-size: clamp(1rem, calc((125px - 20px) / (2 * 1.2)), 5rem);
  text-align: center;
}
</style>
</head>
<body>
<div>如何让这段文本仅换行两次（共两行）同时字号尽可能大？</div>
</body>
</html>

关键属性说明 #

• display: grid + place-content: center：让文本在容器水平、垂直方向都居中，匹配示例效果
• text-wrap: balance：浏览器自动调整换行位置，让两行长度尽可能均衡，避免某一行过短或过长
• font-size: clamp(...)：
  • 1rem是最小字号，确保极端场景下文本仍可读
  • 中间的calc((125px - 20px) / (2 * 1.2))是最大可行字号计算逻辑：容器高度减去上下padding后，除以（行数×行高），得到单行文本的最大字号
  • 5rem是字号上限，防止计算值超出预期
• line-height: 1.2：控制行间距，确保两行文本不会超出容器高度

如果文本内容长度变化，该方案也能自动调整字号，始终保持文本在两行内且字号最大化。

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