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

Question

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

CSS非解决方案

理想情况下， CSS （线夹）可以处理此问题，但浏览器支持不存在 （85.65％）。 -另外，它目前是“极其脆弱的半熟非标准化特性”（ 来源 ）。

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：二进制搜索（目标）

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

我找到了这个 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;
}