jQuery Three Dots Plugin But Extandlable
-
18-06-2021 - |
Question
Is there any jQuery plugin that will summarize my text i.e.:
123456789
into
1234...
However when I click that three dots it will expand it and show:
123456789
Without plugin css and jquery is welcome.
Any ideas?
Solution
There are several plugins for this, and it's so easy that you can probably create your own as well.
But, taking the work from someone else, here is a couple:
OTHER TIPS
CSS-only solution:
.truncate {
width: 250px; /* TODO: set as needed */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.truncate:hover {
white-space: normal;
overflow: visible;
text-overflow: inherit;
}
You could also rig something that'd do so on click via:
$(".truncate").click(function () { $(this).addClass("noTruncate"); }
and then change .truncate:hover
to .noTruncate
.
Here is a non-destructive, jQuery-binded and CSS-executed technique.
Considering this SCSS/LESS:
.collapsable {
margin-bottom: 10px; /* your <p> margin-bottom */
line-height: 20px; /* your <p> line-height */
p {
line-height: inherit;
margin-bottom: inherit;
&:last-child {
margin-bottom: 0;
}
}
&.collapsed {
position: relative;
overflow: hidden;
p {
margin: 0;
}
.expand-link-container {
position: absolute;
bottom: 0; right: 0;
display: block;
line-height: inherit;
padding: 0 2px 0 5px;
background-color: #FFF;
box-shadow: -5px 0 5px 0 white;
}
}
.expand-link-container {
display: none;
}
}
And this jQuery:
function collapseHTML(shownLines, expanderLink){
// Configuration
var shownLines = typeof(shownLines) === "undefined" ? 4 : shownLines,
expanderLink = typeof(expanderLink) === "undefined" ? "[...]" : expanderLink;
$('.collapsable').each(function(){
// If current collapsable has already been collapsed once, skip
if( $(this).find('.expand-link-container').length > 0 ) return false;
// Compute max-height from line-height and shownLines
var lineHeight = $(this).find('p').first().css('line-height');
maxHeight = parseInt(lineHeight, 10) * shownLines;
// If the current div needs collapsing
if( $(this).height() > maxHeight) {
$(this)
// Collapse it
.addClass('collapsed')
.css('max-height', maxHeight)
// Append expander link
.find('p:first-child').append(
'<div class="expand-link-container">' +
' <a href="#">' + expanderLink + '</a>' +
'</div>')
// Bind click to expander link
.find('.expand-link-container a').click(function(e){
e.preventDefault();
$(this).closest('.collapsable')
.removeClass('collapsed')
.css('max-height', '');
});
}
});
}
Calling collapseHTML()
anywhere in your javascript will cause all div.collapse to collapse their HTML content.
Example in JSfiddle
I had used the Summary plugin before (http://plugins.learningjquery.com/summarize/index.html). However I do not know if it is available for the jQuery version that you are using.
You can use substr
Updated Fiddle - http://jsfiddle.net/GC2qC/1/
var ttext = $('span').text(); //Store value
$('span').text($('span').text().substr(0, 4)).append('...'); //Substring
$('body').on('click', 'span', function(){ //Display complete text
$(this).text(ttext);
});