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