Question

我正在尝试在可调整大小的div中添加带有一些文本的标题。我的目的是在调整大小时，如果换行符的数量超过3行，则将标题转换为一行截断的文本（椭圆）。

我使用标题的高度来确定行数。触发鼠标移动侦听器时，它会计算高度（在我的情况下不应大于53 px）（否则会形成4条线），并相应地设置元素的样式属性（椭圆），并在换行符较少时重置该属性比4。

var fun=function()
{
if(parseFloat(getComputedStyle(document.querySelector('.text'), null).getPropertyValue('height').replace('px', ''))>53)
    {
        freq.style.overflow="hidden";
        freq.style.whiteSpace="nowrap";
        freq.style.textOverflow="ellipsis";
    }
    else 
    {
        freq.style.overflow="";
        freq.style.whiteSpace="";
        freq.style.textOverflow="";
    }
}

完整代码如下：https://jsfiddle.net/xv40kn2m/1/

我的问题是，为什么div在从三行变为四行时会闪烁，因此应该变成截断的文本。我尝试将高度记录到控制台上，每个mousemove事件的高度都在一行高度和实际高度之间切换。

我想出了设置和清除超时以避免闪烁的方法。（需要一些超时说明，为什么我不能平滑调整大小？）但是，当记录高度时，它仍在17px（一行高度）和当前高度之间跳跃。结果，当我缓慢移动鼠标时，它允许4行文本而不被截断。

请详细说明为什么会这样。这种行为与mousemove侦听器有关吗？还请提供有关如何避免这种情况的信息。

调整div大小时在三行换行后截断文本

0 个答案: