2

这是 Chris Coyier 的一支笔，在他的文章处理长词和 URL中提到：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 文件中，它的外观如下：

在此处输入图像描述

为什么看起来不一样？

4

4 回答 4

2

它在本地不起作用，因为没有定义语言。只需添加

lang="en-US"

它会起作用。

断字规则是特定于语言的。在 HTML 中，语言由 lang 属性决定，只有当这个属性存在并且有合适的断字字典可用时，浏览器才会断字。

我在这里找到了该信息，而原始信息在此文档中。此外：

lang 的默认值未知，因此建议始终使用适当的值指定此属性。

如此处所述。

于 2021-01-02T11:05:05.040 回答
1

当我们在 codepen 中执行它之前和之后的 HTML 标记时，它会在<body>iframe</body>中自动生成。正因为如此，它的 html 将像这样呈现。

<html class="" lang="en">

当本地化时，我们看不到该lang属性。因此，尝试将lang属性添加到 html 标记，然后您将看到更改 <html class="" lang="en">

于 2021-01-02T16:56:38.713 回答
0

CodePen 设置包括您未包含在本地副本中的额外资源。

设置截图

于 2020-12-31T11:00:47.760 回答
0

我会说这是因为 Codepen 界面包含它自己的浏览器/渲染引擎，它的行为可能与您在单独使用时用于查看它的浏览器不同（没有 codepen“中间”）

于 2020-12-31T12:30:58.013 回答