如何用HTML和CSS避免div内单词被强制拆分换行？

现状分析 #

你当前的代码中，div内的文本要么因HTML换行被解析为额外空格，要么刚好两个单词总宽度超过144px，导致Indianapolis提前换行。要实现"仅当文本超出div宽度时才换行"的效果，可按以下步骤处理：

步骤1：清理HTML文本格式 #

将div内的文本写在同一行，避免多余的换行和前置空格（HTML会把换行解析为空格，额外增加文本宽度）：

<div class="box">Horseshoe Indianapolis</div>

步骤2：用CSS控制换行逻辑 #

根据需求选择对应的CSS方案：

方案A：保持单词完整性，仅在文本整体超出时换行

如果希望尽量让两个单词在同一行，仅当整个文本宽度超过div时才换行（必要时拆分单词）：

.box{
  width:144px;
  border:1px solid red;
  overflow-wrap: break-word; /* 单词无法单独容纳时才拆分换行 */
}

方案B：强制文本不换行（超出部分溢出容器）

如果希望两个单词始终在同一行，即使超出div宽度：

.box{
  width:144px;
  border:1px solid red;
  white-space: nowrap; /* 强制文本不换行 */
}

方案C：仅在空格处换行（默认行为）

如果只需要文本在空格处换行（仅当总宽度超出时），只需保持默认CSS，确保HTML文本无多余空格即可：

.box{
  width:144px;
  border:1px solid red;
}

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