Усечение текста после трех разрывов строк при изменении размера div - PullRequest
Новая
       70

Усечение текста после трех разрывов строк при изменении размера div

0 голосов
/ 02 февраля 2019

Я пытаюсь сделать заголовок с текстом внутри изменяемого размера div.Мое намерение состоит в том, чтобы превратить заголовок в одну строку усеченный текст (эллипсы), когда число разрывов строк превышает 3 строки при изменении размера.

Я использовал высоту заголовка, чтобы определитьколичество строк.Когда срабатывает прослушиватель перемещения мыши, он вычисляет высоту, которая не должна превышать 53 пикселя (иначе бы в моем случае было 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 listener ?.также дайте мне информацию о том, как этого избежать.

...