自动断字是指在网页或文档中文字过长超出容器宽度时，将其自动断开并在该行末添加断字符号（如破折号、连字符等）来换行显示，以保证文本的可读性。
自动断字依赖于已定义的文档语言，因为不同语言对于断字的处理方式和断字符号是不同的。例如，英语和汉语断字的方式是不同的，前者是在单词中间断开，后者是在字符之间断开。
在 HTML 中，可以使用 CSS 的 word-break 属性来控制文本的断字处理方式，可以使用 normal、break-all、keep-all 等值来指定断字的方式。
但在最近，我了解到 lang 属性和另一个 CSS 属性的配合还会影响浏览器处理长单词和连字符的方式。
HTML lang 属性（例如 lang="en"）对于创建可访问的网站是必不可少的。没有它，浏览器和辅助技术只能猜测网站的语言，导致糟糕的用户体验。
如果在窄容器中显示带有长单词的文本，可能会遇到溢出情况。长单词会从容器中跳出来。
如果你查看溢出的单词和容器宽度，唯一的解决方案是将单词拆分成几段并添加连字符。
而 CSS hyphens 属性可以在这里提供帮助。
hyphens 属性的默认值为 manual。通过手动断字，你可以定义何时以及如何分割单词。使用可见连字符（U+2010/‐）或不可见的“软”连字符（U+00AD/­）来定义断字断点。
这两种字符提示都用于分隔单词。不幸的是，manual 方式无法扩展。
<!-- 太复杂了 👇 -->
<div>un­imaginative­ly</div>这种方式不实用，且复杂。
想象一下一个包含数百个由不同人员维护的页面的网站。然后，根据响应布局，需要在不同的单词位置渲染连字符。移动设备上的长单词可能需要连字符，而在大屏幕布局中可能可以接受相同的单词。一个一直可见的连字符是不行的！
另一种方法是使用 hyphens: auto。有了这个 CSS 声明，你将单词连字符的负担抛到了浏览器端。
MDN：
auto使浏览器可以根据其选择的任何规则，在适当的断字点自动断开单词。
在处理了包含长单词的文本之后，我了解到文档语言在浏览器连字号中起到了作用。
以下示例给出 lang 属性如何影响自动断字。
<div lang="en" class="wrapper">
<div>
This is an English sentence with purposefully, unnecessary and
unimaginatively long words.
</div>
<div>
Das ist ein deutscher Satz mit außergewöhnlich und unglaublich langen
Wörtern.
</div>
</div>我不是 100% 确定如何正确地用连字符连接英语单词，但我想用正确的语言连接会更好。
在这里，lang 属性不仅使网站更容易访问，而且还影响单词的分割长度。我们最好确定它的定义。