Tailwind无break-words类，如何解决URL溢出容器问题？

方法一：使用Tailwind内置工具类（推荐） #

Tailwind虽然没有直接对应word-break: break-word的工具类，但提供了break-words，它对应CSS的overflow-wrap: break-word——这是MDN推荐的word-break: break-word替代方案，在现代浏览器中效果一致，能让过长的URL在容器边界自动换行。

示例代码：

<div class="w-64 break-words">
  https://this-is-a-really-long-url-example-that-would-otherwise-overflow-the-container.com/path/to/some/resource?query=params&another=value
</div>

方法二：自定义工具类（若需严格使用word-break: break-word） #

如果你确实需要指定word-break: break-word，可以在Tailwind配置文件中添加自定义工具类：

修改tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
  // 添加自定义工具类
  utilities: {
    '.word-break-break-word': {
      'word-break': 'break-word',
    },
  },
}

之后在HTML中直接使用该类：

<div class="w-64 word-break-break-word">
  https://this-is-a-really-long-url-example-that-would-otherwise-overflow-the-container.com/path/to/some/resource?query=params&another=value
</div>

补充说明 #

MDN已将word-break: break-word标记为过时属性，建议优先使用overflow-wrap: break-word（即Tailwind的break-words），它的换行逻辑更合理，能避免不必要的断词。

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