如何使用Tailwind CSS避免文本块中的孤立词？

完全可以用CSS替代 解决文本孤立词问题，以下是具体实现方式：

一、原生CSS方案 #

1. 使用orphans属性 #

该属性专门控制段落最后一行最少保留的单词数量，设置为2即可避免最后一行只剩单个孤立词：

p {
  orphans: 2;
}

搭配widows属性还能控制段落跨容器时第一行的最少单词数，进一步优化排版：

p {
  widows: 2;
  orphans: 2;
}

2. 使用text-wrap属性（现代浏览器支持） #

这是CSS新规范中的属性，两个值可针对性解决孤立词问题：

• text-wrap: balance：自动平衡文本行长度，降低孤立词出现概率
• text-wrap: pretty：更侧重排版美观，会主动规避孤立词和过长行

p {
  text-wrap: pretty;
}

二、Tailwind CSS方案 #

Tailwind v3.3+已内置相关工具类，直接调用即可：

1. 内置平衡排版类 #

• text-balance：对应text-wrap: balance
• text-pretty：对应text-wrap: pretty
  示例代码：

<p class="text-pretty">This is my text that I dont want an orphaned word for</p>

2. 自定义orphans控制类 #

若需精准控制最后一行单词数，可在tailwind.config.js中扩展工具类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      orphans: {
        2: '2',
      },
    },
  },
}

之后在HTML中使用：

<p class="orphans-2">This is my text that I dont want an orphaned word for</p>

注意事项 #

• orphans和widows属性兼容性极佳，覆盖绝大多数新旧浏览器
• text-wrap: balance/text-pretty仅支持Chrome 114+、Firefox 115+、Safari 17+等现代浏览器，需兼容旧版浏览器时优先使用orphans方案

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