将二进制搜索优化添加到多行文本限制功能

Question

我需要一种解决方案来动态修剪容器中的多行文本，并使其以椭圆结尾。

CSS非解决方案

理想情况下，CSS（换行钳）可以解决此问题，但浏览器支持仅为not there（85.65％）。 -而且它目前是“极其脆弱[...]半熟的非标准化特性[y]”（source）。

JS：弹出直到适合为止（当前解决方案）

我目前有一个有效的JavaScript解决方案（小节和流行音乐，直到适合为止），但扩展性很差。它受文本长度和固定长度之间的差异以及固定的文本元素数量的影响。

var trimTextAddEllipses = function (targetElementClassName) {
	var elArray = document.getElementsByClassName(targetElementClassName);
	Array.from(elArray).forEach(function (el) {

		// create a cache of full text in data-attribute to be non-destructive
		if (!el.hasAttribute('data-text-cache')) {
			el.setAttribute('data-text-cache',el.textContent);
		}
		// reset
		var words = el.textContent = el.getAttribute('data-text-cache');
		// turn into array to pop off items until it fits.
		var wordArray = words.split(' ');
		while (el.scrollHeight > el.offsetHeight) {
			wordArray.pop();
			el.innerHTML = wordArray.join(' ') + ' …';
		}
	});
};

对于调整大小，我将其称为requestAnimationFrame调用的回调，以限制夹紧的次数。

JS：二进制搜索（目标）

单词是按顺序排列（即排序）的，因此二进制搜索方法将使代码更有效。

我发现了这个this binarySearch函数，但是无法提供比较函数来使其正常工作。

我想提供一个与链接的二进制搜索功能一起使用的比较功能的帮助-或适用于此问题的其他二进制搜索解决方案。

注意

从评论中我知道二进制搜索后还有进一步优化的空间，但这需要大量的JS工作（即估算而不是测量，从而避免一遍又一遍地渲染）-但这似乎也是如此困难。

Answer 1

您可以轻松地让循环使用二进制搜索：

let end = wordArray.length, distance = end;

while(distance > 0) {
   distance = Math.floor(distance / 2);
   el.innerHTML = wordArray.slice(0, end).join(' ') + '...';
   end += el.scrollHeight > el.offsetHeight ? -distance : distance;
}