要素内にあるテキストの行数を取得

JavaScript

/**
 * 要素内にあるテキストの行数を取得
 * @param {Element} element 取得するもとの要素
 * @return {Number} 行数を返す
 */
var getNumberLines = function(element) {
	var fontSize = 0, count = 0, calcResult = 0;

	/**
	 * 要素からスタイルを取得
	 */
	var getStyleValue = function(element, styleName, pseudoElt) {
		if (!element) return '';
		if (!pseudoElt) pseudoElt = '';

		var style;

		/**
		 * キャメルケースへ変換
		 */
		var toCamelcase = function(str, upper) {
			if (!str) return str;

			var strs = str.split(/[-_ ]+/),
			    i = 1, len = strs.length;

			if (len <= 1) return str;

			if (upper) {
				i = 0;
				str = '';
			} else {
				str = strs[0].toLowerCase();
			}

			for (; i < len; i++) {
				str += strs[i].toLowerCase().replace(/^[a-z]/, function(value) {
					return value.toUpperCase();
				});
			}

			return str;
		};

		if (document.defaultView) {
			style = document.defaultView.getComputedStyle(element, pseudoElt);
		} else {
			style = element.currentStyle;
			styleName = toCamelcase(styleName);
		}
		return (styleName) ? style[styleName] : style;
	};

	/**
	 * 要素からフォントサイズを取得
	 */
	var getFontSize = function(element) {
		var fontSize = getStyleValue(element, 'font-size');

		if (!fontSize.match(/px$/)) {
			var tmpElem = document.createElement('div');
			tmpElem.style.width = '1em';
			element.appendChild(tmpElem);
			fontSize = tmpElem.offsetWidth;
			element.removeChild(tmpElem);
		}

		return parseInt(fontSize);
	};

	var lineHeightVal = getStyleValue(element, 'line-height'),
	    heightVal     = element.clientHeight,
	    boxSizing     = getStyleValue(element, 'box-sizing');

	if (boxSizing === 'border-box' || boxSizing === 'padding-box') {
		heightVal -= parseInt(getStyleValue(element, 'padding-top'));
		heightVal -= parseInt(getStyleValue(element, 'padding-bottom'));
	}

	if (isNaN(parseInt(lineHeightVal))) {
		fontSize = getFontSize(element);
		while (calcResult < heightVal) {
			calcResult += fontSize;
			if (calcResult <= heightVal) count++;
		}
	} else {
		count = Math.floor(heightVal / parseInt(lineHeightVal));
	}

	return count;
};

JavaScript

var sampleElem = document.getElementById('sample');

alert(getNumberLines(sampleElem));