Skip to content

Instantly share code, notes, and snippets.

@renoirb

renoirb/index.html

Forked from anonymous/index.html
Created February 8, 2017 21:37
Show Gist options
  • Save renoirb/5dc793d986857a75437ba82405d294d1 to your computer and use it in GitHub Desktop.
Save renoirb/5dc793d986857a75437ba82405d294d1 to your computer and use it in GitHub Desktop.
Download ZIP
Deal with hidden content overflow // source http://jsbin.com/xeheyey
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Deal with hidden content overflow</title>
<style id="jsbin-css">
* {
box-sizing: border-box;
}
.limit {
overflow: hidden;
text-overflow: clip;
border: 1px solid;
}
.limit + .limit {
margin-top: 20px;
}
.limit-colorize .limit.limit-cover-alpha {
background-color: blue;
}
.limit-colorize .limit.limit-cover-bravo {
background-color: red;
}
.limit-colorize .limit.limit-cover-charlie {
background-color: yellow;
}
.limit-colorize .limit.limit-cover-delta {
background-color: green;
}
.limit-cover-alpha {
max-height: 340px;
}
.limit-cover-bravo {
max-height: 100px;
}
.limit-cover-charlie {
max-height: 140px;
height: 140px;
}
.limit-cover-delta {
max-height: 40px;
}
</style>
</head>
<body>
<div id=d1 class="limit limit-cover-alpha">
<div class="wrap">
<p>Suspendisse finibus, erat sed pharetra rhoncus, dolor quam auctor libero, vitae mattis mi sapien sed nibh. Integer vehicula libero risus, non accumsan est congue ac. Ut felis purus, vestibulum in diam quis, lacinia sodales ipsum. Integer quis maximus purus. Donec eu quam vitae quam luctus faucibus. Duis iaculis nunc nec mauris dictum molestie. Suspendisse suscipit est erat, vitae suscipit mi ultricies a. Ut aliquet eget turpis vitae imperdiet. Maecenas nisl enim, rhoncus at lorem ultricies, elementum accumsan enim. Quisque ligula nunc, viverra vel tempor eget, consectetur ac elit.</p>
<p>Etiam efficitur risus sed commodo posuere. Etiam nisl lacus, pulvinar ac finibus non, vestibulum eu est. Pulvinar at eleifend vel, porttitor ac diam. Praesent vel laoreet enim.</p>
<p>Pulvinar ac finibus non, vestibulum eu est. Pulvinar at eleifend vel, porttitor ac diam. Praesent vel laoreet enim.</p>
<p>Etiam efficitur risus sed commodo posuere. Etiam nisl lacus, pulvinar ac finibus non, vestibulum eu est. Pulvinar at eleifend vel, porttitor ac diam. Praesent vel laoreet enim.</p>
<p>Suspendisse finibus, erat sed pharetra rhoncus, dolor quam auctor libero, vitae mattis mi sapien sed nibh. Integer vehicula libero risus, non accumsan est congue ac. Ut felis purus, vestibulum in diam quis, lacinia sodales ipsum. Integer quis maximus purus. Donec eu quam vitae quam luctus faucibus. Duis iaculis nunc nec mauris dictum molestie. Suspendisse suscipit est erat, vitae suscipit mi ultricies a. Ut aliquet eget turpis vitae imperdiet. Maecenas nisl enim, rhoncus at lorem ultricies, elementum accumsan enim. Quisque ligula nunc, viverra vel tempor eget, consectetur ac elit.</p>
</div>
</div>
<div id=d2 class="limit limit-cover-bravo">
<div class="wrap">
<p>Suspendisse finibus, erat sed pharetra rhoncus, dolor quam auctor libero, vitae mattis mi sapien sed nibh. Integer vehicula libero risus, non accumsan est congue ac. Ut felis purus, vestibulum in diam quis, lacinia sodales ipsum. Integer quis maximus purus. Donec eu quam vitae quam luctus faucibus. Duis iaculis nunc nec mauris dictum molestie. Suspendisse suscipit est erat, vitae suscipit mi ultricies a. Ut aliquet eget turpis vitae imperdiet. Maecenas nisl enim, rhoncus at lorem ultricies, elementum accumsan enim. Quisque ligula nunc, viverra vel tempor eget, consectetur ac elit.</p>
<p>Etiam efficitur risus sed commodo posuere. Etiam nisl lacus, pulvinar ac finibus non, vestibulum eu est. Pulvinar at eleifend vel, porttitor ac diam. Praesent vel laoreet enim.</p>
</div>
</div>
<div id=d3 class="limit limit-cover-charlie">
<div class="wrap">
<p>Suspendisse finibus, erat sed pharetra rhoncus, dolor quam auctor libero, vitae mattis.</p>
</div>
</div>
<script id="jsbin-javascript">
(function(w, d){
'use strict';
console.log('reloaded');
class ViewOverflowHandler {
constructor(selector) {
let nodeList = document.querySelectorAll(selector);
if (nodeList.length > 1) {
const msg = `Selector '${selector}' expected exactly one match, but found ${nodeList.length}`;
throw new Error(msg);
}
this.selector = selector;
this.$el = document.querySelector(selector);
this.stash = document.createDocumentFragment();
}
get childNodes() {
return document.querySelectorAll(`${this.selector} > div > *`)
}
get childHeightSum() {
return [...this.childNodes]
.map(e => e.offsetHeight)
.reduce((accumulator, curr) => accumulator + curr);
}
amputate() {
let length = this.childNodes.length,
lastIndex = length - 1;
this.stash.appendChild(this.childNodes[lastIndex]);
//this.$el.removeChild(this.$el.childNodes[lastIndex]);
}
overflows() {
//console.log([this.$el.childNodes[0].nextElementSibling])
let parentHeight = this.$el.offsetHeight,
childHeight = this.childHeightSum;
console.log({parentHeight, childHeight});
return parentHeight < childHeight;
}
}
let calculator = {
select: (selector) => [...d.querySelectorAll(selector)],
getComputed: (selector) => {
var out = [];
[...d.querySelectorAll(selector)].forEach(e => {
out.push(w.getComputedStyle(e));
});
return out;
}
};
w.ViewOverflowHandler = ViewOverflowHandler;
w.calc = calculator;
})(window, document);
</script>
<script id="jsbin-source-css" type="text/css">* {
box-sizing: border-box;
}
.limit {
overflow: hidden;
text-overflow: clip;
border: 1px solid;
}
.limit + .limit {
margin-top: 20px;
}
.limit-colorize .limit.limit-cover-alpha {
background-color: blue;
}
.limit-colorize .limit.limit-cover-bravo {
background-color: red;
}
.limit-colorize .limit.limit-cover-charlie {
background-color: yellow;
}
.limit-colorize .limit.limit-cover-delta {
background-color: green;
}
.limit-cover-alpha {
max-height: 340px;
}
.limit-cover-bravo {
max-height: 100px;
}
.limit-cover-charlie {
max-height: 140px;
height: 140px;
}
.limit-cover-delta {
max-height: 40px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">(function(w, d){
'use strict';
console.log('reloaded');
class ViewOverflowHandler {
constructor(selector) {
let nodeList = document.querySelectorAll(selector);
if (nodeList.length > 1) {
const msg = `Selector '${selector}' expected exactly one match, but found ${nodeList.length}`;
throw new Error(msg);
}
this.selector = selector;
this.$el = document.querySelector(selector);
this.stash = document.createDocumentFragment();
}
get childNodes() {
return document.querySelectorAll(`${this.selector} > div > *`)
}
get childHeightSum() {
return [...this.childNodes]
.map(e => e.offsetHeight)
.reduce((accumulator, curr) => accumulator + curr);
}
amputate() {
let length = this.childNodes.length,
lastIndex = length - 1;
this.stash.appendChild(this.childNodes[lastIndex]);
//this.$el.removeChild(this.$el.childNodes[lastIndex]);
}
overflows() {
//console.log([this.$el.childNodes[0].nextElementSibling])
let parentHeight = this.$el.offsetHeight,
childHeight = this.childHeightSum;
console.log({parentHeight, childHeight});
return parentHeight < childHeight;
}
}
let calculator = {
select: (selector) => [...d.querySelectorAll(selector)],
getComputed: (selector) => {
var out = [];
[...d.querySelectorAll(selector)].forEach(e => {
out.push(w.getComputedStyle(e));
});
return out;
}
};
w.ViewOverflowHandler = ViewOverflowHandler;
w.calc = calculator;
})(window, document);</script></body>
</html>
Raw
jsbin.xeheyey.css
* {
box-sizing: border-box;
}
.limit {
overflow: hidden;
text-overflow: clip;
border: 1px solid;
}
.limit + .limit {
margin-top: 20px;
}
.limit-colorize .limit.limit-cover-alpha {
background-color: blue;
}
.limit-colorize .limit.limit-cover-bravo {
background-color: red;
}
.limit-colorize .limit.limit-cover-charlie {
background-color: yellow;
}
.limit-colorize .limit.limit-cover-delta {
background-color: green;
}
.limit-cover-alpha {
max-height: 340px;
}
.limit-cover-bravo {
max-height: 100px;
}
.limit-cover-charlie {
max-height: 140px;
height: 140px;
}
.limit-cover-delta {
max-height: 40px;
}
Raw
jsbin.xeheyey.js
(function(w, d){
'use strict';
console.log('reloaded');
class ViewOverflowHandler {
constructor(selector) {
let nodeList = document.querySelectorAll(selector);
if (nodeList.length > 1) {
const msg = `Selector '${selector}' expected exactly one match, but found ${nodeList.length}`;
throw new Error(msg);
}
this.selector = selector;
this.$el = document.querySelector(selector);
this.stash = document.createDocumentFragment();
}
get childNodes() {
return document.querySelectorAll(`${this.selector} > div > *`)
}
get childHeightSum() {
return [...this.childNodes]
.map(e => e.offsetHeight)
.reduce((accumulator, curr) => accumulator + curr);
}
amputate() {
let length = this.childNodes.length,
lastIndex = length - 1;
this.stash.appendChild(this.childNodes[lastIndex]);
//this.$el.removeChild(this.$el.childNodes[lastIndex]);
}
overflows() {
//console.log([this.$el.childNodes[0].nextElementSibling])
let parentHeight = this.$el.offsetHeight,
childHeight = this.childHeightSum;
console.log({parentHeight, childHeight});
return parentHeight < childHeight;
}
}
let calculator = {
select: (selector) => [...d.querySelectorAll(selector)],
getComputed: (selector) => {
var out = [];
[...d.querySelectorAll(selector)].forEach(e => {
out.push(w.getComputedStyle(e));
});
return out;
}
};
w.ViewOverflowHandler = ViewOverflowHandler;
w.calc = calculator;
})(window, document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment