Compact/Loose text + prettyprint +tests

Jquery/CSS snippet to maintain prettyprinted text content in one line and to expand on click

by David Gonzalez

HTML

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<ul>
  <li>
    <pre class="prettyprint lang-js compact-overflow">
      "{"0":{"fff":["Hello, world.","1","1","1","1","1"]}}"
    </pre>
</li>
</ul>>

CSS

.compact-overflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: zoom-in;
}
.loose-overflow {  
  text-overflow: unset;  
  white-space: normal;
  word-wrap: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  cursor: zoom-out;
}
pre.prettyprint{
  border: none;
  margin: 0;
  padding: 0;
}

JavaScript

$(".prettyprint").click( function(){
	$(this).toggleClass("compact-overflow");
	$(this).toggleClass("loose-overflow");
});