携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第29天，点击查看活动详情
HTML lang 属性（例如 lang="en"）对于创建可访问的网站是必不可少的。没有它，浏览器和辅助技术只能猜测网站的语言，导致糟糕的用户体验。
虽然我知道 lang 属性很重要，但在这之前我不知道它还会影响浏览器处理长单词和连字符的方式。
hyphens: auto 和 lang 属性
如果在窄容器中显示带有长单词的文本，可能会遇到溢出情况。长单词会从容器中跳出来。
如果您查看溢出的单词和容器宽度，唯一的解决方案是将单词拆分成几段并添加连字符。
而 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 属性不仅使网站更容易访问，而且还影响单词的分割长度。我们最好确定它的定义。
本文首发 blog，如果喜欢或者有所启发，欢迎 Star，对作者也是一种鼓励。
