html - 当我从本地文件和 Codepen 打开相同的代码时，它看起来不同。为什么会发生这种情况？

Question

这是 Chris Coyier 的一支笔，在他的文章 Handling Long Words and URLs 中提到过。 :https://codepen.io/team/css-tricks/pen/RWaNxr .

<style>
.hyphenate {
  /* Careful, this breaks the word wherever it is without a hyphen */
  overflow-wrap: break-word;
  word-wrap: break-word;

  /* Adds a hyphen where the word breaks */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

/* Demo Styles */

body {
  background: #333;
  font-family: 'Open Sans', sans-serif;
}

.container {
  background: #fff;
  border-radius: 5px;
  width: 300px;
  margin: auto auto 25px;
  padding: 25px;
}
</style>

<div class="container">
  <p class="hyphenate">For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.</p>
</div>
<div class="container">
  <p class="hyphenate">According to Wikipedia, The longest word in any of the major English language dictionary is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.</p>
</div>

如果您只是在浏览器中打开此链接，则它在 Firefox 中的外观如下:

如果将所有内容复制到本地 HTML 文件，结果如下:

为什么看起来不一样？

Answer 1

它无法在本地工作，因为没有定义语言。只需添加

lang="en-US"

它会起作用。

Hyphenation rules are language-specific. In HTML, the language is determined by the lang attribute, and browsers will hyphenate only if this attribute is present and if an appropriate hyphenation dictionary is available.

我找到了该信息here ，而原来是in this docs 。另外:

The default value of lang is unknown, therefore it is recommended to always specify this attribute with the appropriate value.

如上所述here .