Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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.

+ add another resource

Packages

Add Packages

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.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                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}
}
              
            
!

JS

              
                // 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 +
          '&nbsp;&nbsp;<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 */
});

              
            
!
999px

Console