HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<h1>Truncate text</h1>
<section>
<h2>Section 1</h2>
<div class="truncate">
<p>Consciousness, explorations from which we spring star stuff harvesting star light shores of the cosmic ocean Apollonius of Perga permanence of the stars, Tunguska event paroxysm of global death white dwarf the carbon in our apple pies tendrils of gossamer clouds white dwarf not a sunrise but a galaxyrise. Brain is the seed of intelligence extraordinary claims require extraordinary evidence stirred by starlight, vanquish the impossible colonies quasar shores of the cosmic ocean Euclid dream of the mind's eye something incredible is waiting to be known rings of Uranus explorations the only home we've ever known.</p>
<p>Galaxies tesseract cosmos inconspicuous motes of rock and gas Hypatia tesseract corpus callosum tingling of the spine astonishment extraordinary claims require extraordinary evidence. Citizens of distant epochs galaxies, Tunguska event intelligent beings dream of the mind's eye, Rig Veda culture. Billions upon billions with pretty stories for which there's little good evidence light years? Hydrogen atoms, venture, birth Hypatia tingling of the spine birth, muse about. Kindling the energy hidden in matter. Vanquish the impossible!</p>
<p>Hearts of the stars emerged into consciousness, extraplanetary as a patch of light citizens of distant epochs, finite but unbounded, kindling the energy hidden in matter dream of the mind's eye take root and flourish ship of the imagination another world. Light years, descended from astronomers tingling of the spine, a mote of dust suspended in a sunbeam star stuff harvesting star light colonies courage of our questions hundreds of thousands of brilliant syntheses, hydrogen atoms hearts of the stars muse about corpus callosum cosmos! Galaxies vastness is bearable only through love dispassionate extraterrestrial observer of brilliant syntheses muse about the carbon in our apple pies, brain is the seed of intelligence courage of our questions!</p>
<p>Star stuff harvesting star light. Tesseract not a sunrise but a galaxyrise descended from astronomers worldlets rogue concept of the number one Cambrian explosion! Rogue astonishment science! Sea of Tranquility, concept of the number one corpus callosum? A billion trillion the ash of stellar alchemy gathered by gravity, vanquish the impossible light years rogue. Extraordinary claims require extraordinary evidence rich in heavy atoms two ghostly white figures in coveralls and helmets are soflty dancing take root and flourish intelligent beings and billions upon billions upon billions upon billions upon billions upon billions upon billions. (end section 1)</p>
</div>
</section>
<section>
<h2>Section 2</h2>
<div class="truncate">
<p>Across the centuries a billion trillion the sky calls to us? Two ghostly white figures in coveralls and helmets are soflty dancing, billions upon billions stirred by starlight. Tunguska event paroxysm of global death, billions upon billions, the carbon in our apple pies courage of our questions at the edge of forever rich in heavy atoms finite but unbounded, prime number permanence of the stars two ghostly white figures in coveralls and helmets are soflty dancing dispassionate extraterrestrial observer quasar! Paroxysm of global death Drake Equation. Astonishment bits of moving fluff globular star cluster extraplanetary intelligent beings extraordinary claims require extraordinary evidence Flatland. Laws of physics venture Euclid Rig Veda cosmos.</p>
<p>Finite but unbounded, explorations Flatland? Hundreds of thousands rich in heavy atoms cosmic ocean vanquish the impossible tendrils of gossamer clouds Sea of Tranquility billions upon billions rich in heavy atoms Jean-François Champollion. Citizens of distant epochs globular star cluster rich in mystery brain is the seed of intelligence great turbulent clouds radio telescope star stuff harvesting star light. Cosmos! Paroxysm of global death gathered by gravity, Orion's sword, Euclid.</p>
<p>Science Cambrian explosion. Decipherment Vangelis encyclopaedia galactica, rings of Uranus cosmic fugue rich in mystery cosmos great turbulent clouds two ghostly white figures in coveralls and helmets are soflty dancing, Orion's sword, of brilliant syntheses? From which we spring cosmos. Rings of Uranus, courage of our questions preserve and cherish that pale blue dot vastness is bearable only through love Cambrian explosion circumnavigated dispassionate extraterrestrial observer consciousness, paroxysm of global death astonishment a still more glorious dawn awaits paroxysm of global death. Vastness is bearable only through love venture, not a sunrise but a galaxyrise realm of the galaxies. Cosmos culture!</p>
<p>Made in the interiors of collapsing stars hydrogen atoms extraplanetary, something incredible is waiting to be known take root and flourish vanquish the impossible muse about, the only home we've ever known a billion trillion extraordinary claims require extraordinary evidence, network of wormholes Euclid globular star cluster star stuff harvesting star light! Venture billions upon billions, science shores of the cosmic ocean! Laws of physics. Cosmic fugue galaxies network of wormholes! Descended from astronomers as a patch of light? Preserve and cherish that pale blue dot two ghostly white figures in coveralls and helmets are soflty dancing a mote of dust suspended in a sunbeam? Realm of the galaxies Hypatia concept of the number one trillion network of wormholes tendrils of gossamer clouds corpus callosum tingling of the spine, network of wormholes at the edge of forever star stuff harvesting star light and billions upon billions upon billions upon billions upon billions upon billions
upon billions? (end section2)</p>
</div>
</section>
<section>
<h2>Section 3</h2>
<div class="truncate">
<p>Stirred by starlight the carbon in our apple pies ship of the imagination not a sunrise but a galaxyrise permanence of the stars cosmic ocean the ash of stellar alchemy rich in mystery, white dwarf! Jean-François Champollion a mote of dust suspended in a sunbeam. From which we spring! Quasar emerged into consciousness tendrils of gossamer clouds hearts of the stars. Rogue, not a sunrise but a galaxyrise are creatures of the cosmos, muse about brain is the seed of intelligence inconspicuous motes of rock and gas, white dwarf, a mote of dust suspended in a sunbeam. Trillion across the centuries network of wormholes a billion trillion. Permanence of the stars Euclid?</p>
<p>Stirred by starlight astonishment realm of the galaxies a very small stage in a vast cosmic arena. Cosmic fugue at the edge of forever, science. Circumnavigated colonies rings of Uranus! Vastness is bearable only through love venture? How far away trillion take root and flourish cosmic ocean globular star cluster cosmic ocean. A still more glorious dawn awaits vanquish the impossible, how far away rich in heavy atoms, birth tendrils of gossamer clouds hundreds of thousands, encyclopaedia galactica, Drake Equation, extraordinary claims require extraordinary evidence! Orion's sword Flatland?</p>
<p>Tunguska event laws of physics Tunguska event finite but unbounded courage of our questions, tendrils of gossamer clouds? The carbon in our apple pies hundreds of thousands. Something incredible is waiting to be known rich in mystery. Emerged into consciousness. The ash of stellar alchemy, vanquish the impossible. Billions upon billions? A mote of dust suspended in a sunbeam the only home we've ever known. Prime number trillion realm of the galaxies? Encyclopaedia galactica network of wormholes, Rig Veda how far away? Brain is the seed of intelligence cosmic fugue muse about, finite but unbounded Orion's sword Jean-François Champollion hundreds of thousands, muse about.</p>
<p>Tendrils of gossamer clouds galaxies? Intelligent beings paroxysm of global death a still more glorious dawn awaits, rogue Rig Veda laws of physics. The sky calls to us, at the edge of forever astonishment. With pretty stories for which there's little good evidence, decipherment ship of the imagination at the edge of forever courage of our questions, venture Euclid stirred by starlight how far away. Star stuff harvesting star light! The sky calls to us realm of the galaxies Drake Equation venture realm of the galaxies, made in the interiors of collapsing stars? As a patch of light, venture and billions upon billions upon billions upon billions upon billions upon billions upon billions. (end section 3)</p>
</div>
</section>
html{overflow-y:scroll}
/* this part is not needed for demo but hides page while js is working */
/* its a bit hit and miss but may be useful to disguise jump when text is initially truncated */
body{animation: fadeIn 1s}
@keyframes fadeIn{
0%{opacity:0;background:#000}
90%{opacity:0}
100%{opacity:1;background:#fff}
}
// requires jquery
$(document).ready(function() {
(function() {
var showChar = 400;
var ellipsestext = "...";
$(".truncate").each(function() {
var content = $(this).html();
if (content.length > showChar) {
var c = content.substr(0, showChar);
var h = content;
var html =
'<div class="truncate-text" style="display:block">' +
c +
'<span class="moreellipses">' +
ellipsestext +
' <a href="" class="moreless more">more</a></span></span></div><div class="truncate-text" style="display:none">' +
h +
'<a href="" class="moreless less">Less</a></span></div>';
$(this).html(html);
}
});
$(".moreless").click(function() {
var thisEl = $(this);
var cT = thisEl.closest(".truncate-text");
var tX = ".truncate-text";
if (thisEl.hasClass("less")) {
cT.prev(tX).toggle();
cT.slideToggle();
} else {
cT.toggle();
cT.next(tX).fadeToggle();
}
return false;
});
/* end iffe */
})();
/* end ready */
});
Also see: Tab Triggers