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

user_5587480 0
Viewed 196

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?

css-hyphens firefox css html
4 Answers

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.

user_13867030

When we do it in codepen the HTML markup before and after <body> and </body> is auto generated in an iframe. Because of that there it the html will render like this.

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

When localy we don't see the lang attribute. So try adding the lang attribute to the html tag then you will se the changes <html class="" lang="en">

Admin1

The CodePen settings include extra resources that you didn't include in your local copy.

screenshot of the settings

Dorward_190680

I would say that's because the Codepen interface contains its own browser/rendering engine, which can behave differently than the browser which you use for viewing it when used on its own (without codepen "in-between")

user_56416690
Related