Can someone help me figure out how to display a 2-line image text below? Sample Image
This is what it looks like in Chrome, but unfortunately, it doesn't work in Firefox. I came across a website that has a tutorial for Chrome: https://css-tricks.com/line-clampin/. The tutorial uses -webkit-line-clamp to add "..." at the desired line, however, this property does not work in Firefox as mentioned in the tutorial. Is there another way to truncate text in Firefox? I attempted to use JavaScript to trim the string like so:
String.prototype.truncString = function(max, add){
add = add || '...';
return (this.length > max ? this.substring(0,max)+add : this);
};
if($(".smaller_768 ").width() < 200 && $(".smaller_768 ") > 120){
trim_content(28);
}
function trim_content(numberofwords){
$(".smaller_768").each(function(){
var content = $.trim($(this).text());
$(this).text(content.truncString(numberofwords, "..."));
});
}
However, this method doesn't work consistently when changing devices due to variations in div sizes.
Thank you for your assistance.