jquery-multiline-overflow.js
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Document</title> | |
<style> | |
.demo { | |
height: 3em; | |
line-height: 1.5em; | |
overflow: hidden; | |
position: relative; | |
padding-right: 1em; | |
} | |
.demo .content { | |
display: block; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Demo</h1> | |
<p class="demo"> | |
<span class="content"> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, sequi, fuga, autem, dignissimos aperiam rerum quisquam ut maiores tempore eveniet repellat perspiciatis aliquam quis. Numquam voluptatibus ipsa earum accusantium totam. | |
</span> | |
</p> | |
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |
<script> | |
/** | |
* $.fn.multilineOverflow | |
* ---------------------- | |
* text-overflow for multiline text | |
* - parent must have height and must be relative positioned | |
* - parent should have padding on right | |
* - node must be block | |
*/ | |
(function($){ | |
$.fn.multilineOverflow = function(options){ | |
options = $.extend(true, { | |
name: "multilineOverflow", | |
text: String.fromCharCode(8230), | |
style: {} | |
}, options); | |
this.each(function(){ | |
var node, container, text; | |
node = $(this); | |
container = node.parent(); | |
text = node.data(options.name); | |
if(! text){ | |
container.css("position", "relative"); | |
text = $("<i>").text(options.text) | |
.css({ | |
display: "none", | |
position: "absolute", | |
right: 0, | |
bottom: 0 | |
}) | |
.css(options.style) | |
.appendTo(container); | |
node.data(options.name, text); | |
} | |
text.css("display", container.height() < node.height() ? "block" : "none"); | |
}); | |
}; | |
}(jQuery)); | |
$(".content").multilineOverflow({ | |
style: { | |
color: "red" | |
} | |
}); | |
$(window).on("resize", function(){ | |
$(".content").multilineOverflow(); | |
}); | |
</script> | |
</body> | |
</html> |
/** | |
* $.fn.multilineOverflow | |
* ---------------------- | |
* text-overflow for multiline text | |
* - parent must have height and must be relative positioned | |
* - parent should have padding on right | |
* - node must be block | |
*/ | |
(function($){ | |
$.fn.multilineOverflow = function(options){ | |
options = $.extend(true, { | |
name: "multilineOverflow", | |
text: String.fromCharCode(8230), | |
style: {} | |
}, options); | |
this.each(function(){ | |
var node, container, text; | |
node = $(this); | |
container = node.parent(); | |
text = node.data(options.name); | |
if(! text){ | |
container.css("position", "relative"); | |
text = $("<i>").text(options.text) | |
.css({ | |
display: "none", | |
position: "absolute", | |
right: 0, | |
bottom: 0 | |
}) | |
.css(options.style) | |
.appendTo(container); | |
node.data(options.name, text); | |
} | |
text.css("display", container.height() < node.height() ? "block" : "none"); | |
}); | |
}; | |
}(jQuery)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment