double line with ellipsis | Chinese Rule of Eight

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

$(document).ready(function() {

function calculateWidthOfSpace(font, fontSize) {

var a = $.fn.textWidth('a', font, fontSize);

var a_space_a = $.fn.textWidth('a a', font, fontSize);

return a_space_a - (2 * a);

}

function getCharWidth(str, font, fontSize, widthOfSpace, callback) {

if (str == ' ') {

callback(widthOfSpace, true);

} else {

callback($.fn.textWidth(str, font, fontSize), false);

}

function storeChar(tempStorage, ch) {

tempStorage += ch;

}

$.fn.textHeight = function(paragraph, font, fontSize) {

if (!$.fn.textHeight.placeholderEl) $.fn.textHeight.placeholderEl = $('<span>').hide().appendTo(document.body);

font = font.replace(/"/g, '');

var SPACE_WIDTH = calculateWidthOfSpace(font, fontSize);

var characterArray = paragraph.split('');

var paragraphFormat = [];

var holder = "";

var LIMIT = $("#para").width();

var totalTextWidth = 0;

var paragraphFormatCur = 0;

var previousSpaceExists = false;

for (var i = 0; i < characterArray.length; i++) {

getCharWidth(characterArray[i], font, fontSize, SPACE_WIDTH, function(width, isSpace) {

if (isSpace) previousSpaceExists = true;

totalTextWidth += width;

});

holder += characterArray[i];

if (totalTextWidth > LIMIT) {

// over limit, no space previously. But currently, there's space

if (characterArray[i] == ' ') {

textWidth = SPACE_WIDTH;

paragraphFormat[paragraphFormatCur++] = holder;

holder = '';

totalTextWidth = 0;

}

// over limit, previously was space

else if (previousSpaceExists) {

previousSpaceExists = false;

var indexOfLastSpace = holder.lastIndexOf(' ');

var prev = holder.slice(0, indexOfLastSpace);

paragraphFormat[paragraphFormatCur++] = prev;

var next = holder.slice(indexOfLastSpace+1, holder.length);

totalTextWidth = $.fn.textWidth(next, font, fontSize);

holder = next;

}

paragraphFormat[paragraphFormatCur++] = holder;

console.log(paragraphFormat);

return paragraphFormat.length;

};

$.fn.textWidth = function(text, font, fontSize) {

if (!$.fn.textWidth.placeholderEl) $.fn.textWidth.placeholderEl

= $('<span>').hide().appendTo(document.body);

var validText = text || this.val() || this.text();

font = font.replace(/"/g, '');

$.fn.textWidth.placeholderEl.text(validText).css({'font-family': font, 'font-size': fontSize});

return $.fn.textWidth.placeholderEl.width();

};

function numOfLines(textInEle, eleSel) {

var para = document.querySelector(eleSel);

var font = window.getComputedStyle(para).getPropertyValue('font-family');

var fontSize = window.getComputedStyle(para).getPropertyValue('font-size');

var fullHeight = $.fn.textHeight(textInEle, eleSel, font, fontSize);

return (fullHeight);

}

// test cases

//var TEXT = 'abcdefghijklmnopqrstuvwxyz';

//var TEXT = 'abcdefghijklm nop';

//var TEXT = 'abc defghijklmnop';

//var TEXT = 'abc defghijklm nop';

//var TEXT = 'abc def ghi jkl mama nop';

//var TEXT = 'def ghi jkl';

//var TEXT = 'lll lll lll lll ll';

//var TEXT = 'lll lll lll lll lll';

var TEXT = 'a b c d e f g h i j k l m n o p q r s t u v w x y z';

console.log('There are current '+numOfLines(TEXT, "#para") + ' number of lines');

$('#para').text(TEXT);

console.log('NOTE: width of div is '+$('#para').width()); // 68

});