如何使用CSS实现首行文本按指定宽度换行、后续行不换行？

根据需求，以下分两种场景给出具体实现方式：

一、前端网页场景（CSS实现） #

通过嵌套元素结合CSS属性，让首行按指定宽度自动换行，第二行内容强制不换行：

代码示例 #

<div class="text-container">
  Is it possible to break a text
  <span class="keep-nowrap">at some width for the first line and no break for the second line</span>
</div>

.text-container {
  width: 220px; /* 设置首行的指定宽度 */
  background: #f5f5f5;
  padding: 8px;
}
.keep-nowrap {
  white-space: nowrap; /* 强制第二行内容不换行 */
}

此方案中，首行会在设置的width宽度处自动换行，第二行的内容会保持连续不折行，超出容器时会横向溢出。

二、纯文本处理场景（Python脚本实现） #

如果是对纯文本进行预处理，可通过字符分割结合单词边界判断，实现首行按指定宽度（字符数或换算后的实际宽度）拆分，第二行保留完整内容：

代码示例 #

def split_first_line(text, target_width):
    # 先截取近似宽度的内容，再找到最后一个空格避免拆分单词
    temp_first = text[:target_width]
    last_space_idx = temp_first.rfind(' ')
    if last_space_idx != -1:
        first_line = text[:last_space_idx]
        second_line = text[last_space_idx + 1:]
    else:
        # 若首行无空格，直接按指定宽度拆分
        first_line = text[:target_width]
        second_line = text[target_width:]
    return f"{first_line}\n{second_line}"

# 测试示例
original_text = "Is it possible to break a text at some width for the first line and no break for the second line"
output = split_first_line(original_text, 25)
print(output)

输出结果 #

Is it possible to break a text
at some width for the first line and no break for the second line

若要精确匹配像素宽度，可结合字体的平均字符宽度进行换算，调整target_width的数值。

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