javascript - 将二进制搜索优化添加到多行文本夹紧功能

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

CSS非解决方案

理想情况下，CSS（线夹）可以处理此问题，但是浏览器支持仅为not there（85.65％）。 -另外，它目前是“极其脆弱的半熟非标准化特性”（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工作（即估算而不是测量，从而避免一遍又一遍地渲染）-但这似乎太困难了。

最佳答案

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

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;
}

关于javascript - 将二进制搜索优化添加到多行文本夹紧功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55031471/