Skip to content

Instantly share code, notes, and snippets.

@mach3

mach3/example.html

Last active August 29, 2015 13:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mach3/10990094 to your computer and use it in GitHub Desktop.
Save mach3/10990094 to your computer and use it in GitHub Desktop.
Download ZIP
jquery-multiline-overflow.js
Raw
example.html
<!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>
Raw
jquery-multiline-overflow.js
/**
* $.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