Search code examples
htmlcssfirefoxcss-hyphens

The same code looks differently when I open it from a local file and from Codepen. Why does that happen?

Here is a pen by Chris Coyier, referred in his article 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>

Here is how it looks in Firefox if you simply open this link in the browser:

enter image description here

And here is how it looks if you copy everything to a local HTML file:

enter image description here

Why it looks different?

Solution

  • It does not work locally because there is no language defined. Simply add

    lang="en-US"

    and it will work.

    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.

    I found that info here, while original is in this docs. Additionally:

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

    as stated here.