如何实现Div内仅顶部行允许Orphans的自适应排版（无需硬编码换行标签）

这个需求我之前做旅游类项目的时候刚好碰到过！说白了就是不想让标题的最后一行孤零零只剩一个词，反而允许第一行出现单个孤立词对吧？完全不用硬写<br>标签，纯CSS就能搞定，还能自适应所有标题内容和设备尺寸。

给你两个实用的纯CSS方案，都是零硬编码的：

方案一：用现代CSS文本优化属性（首推） #

现在主流浏览器都支持text-wrap: pretty这个属性，它的核心作用就是自动优化文本换行逻辑，尽量让最后一行的内容更长，避免出现“最后一行只有单个词”的情况——完美匹配你要的“仅顶部行允许孤立词”的效果！

给你的容器加上这些CSS代码就行：

.tour-card-title {
  width: 100px;
  height: 150px;
  line-height: 1.6; /* 根据容器高度调整合适的行高，确保文本能完整放下 */
  text-wrap: pretty;
  /* 如果需要文本靠左下对齐，加上下面这几行 */
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

不管你的标题是3个词还是10个词，不管设备屏幕怎么变，浏览器都会自动调整换行位置，把长词组留在最后一行，只会让顶部行可能出现单个孤立词，完全不用你提前预判内容。

方案二：兼容老浏览器的 fallback 方法 #

如果要兼容一些比较旧的浏览器（比如老版本Safari），可以用word-break配合特殊的 display 属性来实现类似效果，虽然没有前者智能，但也能大概率避免最后一行出现单个词：

.tour-card-title {
  width: 100px;
  height: 150px;
  line-height: 1.6;
  word-break: normal; /* 保持英文单词完整性，不强制词内断行 */
  /* 用table-cell实现左下对齐+优化排版 */
  display: table-cell;
  vertical-align: bottom;
  text-align: left;
}

另外提醒下：如果容器高度固定，担心文本溢出的话，可以加上overflow: hidden；要是需要溢出时显示省略号，就再加text-overflow: ellipsis; white-space: nowrap;——这部分是可选的，看你的具体需求来调整。

内容来源于stack exchange