Как определить, применяется ли усечение в моем стиле через JS? - PullRequest
Новая
       18

Как определить, применяется ли усечение в моем стиле через JS?

4 голосов
/ 29 мая 2010

Я применяю усечение с использованием стилей CSS: 

.yui-skin-sam td:not(.yui-dt-editable) .yui-dt-liner{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;        
    -o-text-overflow: ellipsis;
    -moz-binding: url('ellipsis.xml#ellipsis');     
}

.yui-skin-sam td[class~=yui-dt-editable] .yui-dt-liner{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;        
    -o-text-overflow: ellipsis;
}

(Sidenote: я не уверен, что это лучший способ написать мой CSS. Это обходной путь для Firefox, так как усечение только в Firefox вроде работает).

Я хочу, чтобы всплывающая подсказка появлялась поверх усеченного текста. Как определить, обрезан ли текст, чтобы я мог отобразить подсказку?

Ответы [ 2 ]

13 голосов
/ 26 ноября 2014

Вопрос старый и был дан ответ.

Однако, чтобы применить решение, данное @aSeptik, вам нужно заранее знать, сколько символов помещается в контейнер, или использовать плагин jQuery.

Я пришел к той же проблеме, и сегодня решение очень простое: используйте свойства clientWith и scrollWidth.

Содержание усекается, если elem.scrollWidth > elem.clientWidth.

Вот документация MDN: https://developer.mozilla.org/en-US/docs/Web/API/element.scrollWidth

И пример в jsFiddle: http://jsfiddle.net/diegof79/de9xsn4b/

1 голос
/ 29 мая 2010

Имейте в виду, что CSS никогда не изменяет DOM !!!

Фрагменты jQuery: 

$(function() {
    $('a.link').each(function(e) {
        var link = $(this).text();
        if ( link.length > 100) {
            $(this).attr('title', link );
        }
    });
});

Если у вас есть ссылки 

<a class="link" href="" >the brown fox jumps over the lazy dog</a>

вышеуказанный код даст 

    <a class="link" href="" title="the brown fox jumps over the lazy dog" >
     the brown fox jumps over the lazy dog
    </a>

свойство text-overflow: ellipsis; сделает все остальное, как вы знаете!

ВПЕРЕДИ:

здесь есть небольшой плагин

Я хотел иметь возможность использовать эту функцию во всех браузерах, поэтому я написал небольшой плагин jQuery для поддержки Firefox. Чтобы использовать, просто вызовите ellipsis () для объекта jQuery. Например: 

$("span").ellipsis();
...