Tailwind CSS - 连字符

Tailwind CSS - 连字符

Tailwind CSS 中的 hyphens 工具类控制文本块中单词换行时如何断字。适当的断字可以改善文本布局和可读性，尤其是在狭窄的容器中。

断字工具类

Tailwind 提供了三个类来管理断字行为。

类名	CSS 属性
hyphens-none	hyphens: none;
hyphens-manual	hyphens: manual;
hyphens-auto	hyphens: auto;

功能和用法

• hyphens-none：阻止浏览器自动断字。单词只会通过空格换行。
• hyphens-manual：（默认行为）允许浏览器仅在手动指定的位置断字，使用软连字符（soft hyphen）（­ 或 \u00AD）。
• hyphens-auto：允许浏览器根据 HTML 元素上 lang 属性定义的语言规则，在适当的位置自动插入连字符。

代码示例

为了正确演示断字，我们将使用一个固定宽度的容器并设置 lang 属性，这对于 hyphens-auto 至关重要。

示例：使用 hyphens-auto 自动断字

请注意浏览器如何根据英语断字规则自动拆分长单词 supercalifragilisticexpialidocious。这仅在设置了 lang="en"（或其他适当的语言代码）时有效。

<!DOCTYPE html>
<html lang="en">
 <head>
  <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="p-4">
  <h2 class="text-xl font-bold mb-4">Automatic Hyphenation (`hyphens-auto`)</h2>
  <div class="w-48 bg-gray-100 p-4 border">
   <p class="hyphens-auto">
    This is a demonstration of automatic hyphenation: supercalifragilisticexpialidocious.
   </p>
  </div>
 </body>
</html>

示例：使用 hyphens-manual 手动断字

这里，我们使用软连字符（­）来建议一个潜在的断点。浏览器只会在需要时精确地在此处断字。

<!DOCTYPE html>
<html lang="en">
 <head>
  <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="p-4">
  <h2 class="text-xl font-bold mb-4">Manual Hyphenation (`hyphens-manual`)</h2>
  <div class="w-48 bg-gray-100 p-4 border">
   <p class="hyphens-manual">
    This is a demonstration of manual hyphenation: supercali&shy;fragilistic&shy;expialidocious.
   </p>
  </div>
 </body>
</html>

示例：使用 hyphens-none 禁用断字

使用 hyphens-none 后，长单词将不会被拆分，这可能会导致布局溢出问题。当你想不惜一切代价防止特定单词内出现换行时，这会很有用。

<!DOCTYPE html>
<html lang="en">
 <head>
  <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="p-4">
  <h2 class="text-xl font-bold mb-4">No Hyphenation (`hyphens-none`)</h2>
  <div class="w-48 bg-gray-100 p-4 border">
   <p class="hyphens-none">
    This is a demonstration of no hyphenation: supercalifragilisticexpialidocious.
   </p>
  </div>
 </body>
</html>

常见陷阱

• 忘记 lang 属性：hyphens-auto 依赖于 <html> 标签或父元素上的 lang 属性。如果没有它，浏览器将不知道要应用哪种语言的断字规则。
• 浏览器支持：虽然现代浏览器广泛支持，但如果你需要支持旧平台，请检查兼容性。hyphens 属性有供应商前缀（-webkit-hyphens、-ms-hyphens），Tailwind 会为你处理这些。