Console here in result is a simple div
with as-console-wrapper class. So you can add styles to customize it.
For example: set max-height, add hover style
console.log("This");
console.log("is");
console.log("as");
console.log("example");
console.log("output");
console.log("that");
console.log("takes");
console.log("up");
console.log("a");
console.log("lot");
console.log("of");
console.log("space");
.as-console-wrapper {
height: 25px;
opacity: 0.2;
}
.as-console-wrapper:hover {
height: auto;
opacity: 1;
}
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
Or event make a label for console like this
setTimeout(function() {
console.log("This");
console.log("is");
console.log("as");
console.log("example");
console.log("output");
console.log("that");
console.log("takes");
console.log("up");
console.log("a");
console.log("lot");
console.log("of");
console.log("space");
}, 2000);
.as-console-wrapper {
transform: translateX(90%);
}
.as-console-wrapper .as-console {
display: none;
}
.as-console-wrapper::before {
content: "Console";
display: block;
background-color: #e9e9e9;
border: 1px solid #ccc;
}
.as-console-wrapper:hover {
transform: translateX(0);
}
.as-console-wrapper:hover::before {
display: none;
}
.as-console-wrapper:hover .as-console {
display: table;
}
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>
<p>Testy test is for testing.</p>