Вы можете сделать это с помощью функции reshape()
или с функциями melt()
/ cast()
в пакете reshape. Для второго варианта пример кода:
library(reshape)
cast(dat1, name ~ numbers)
Или с помощью reshape2
library(reshape2)
dcast(dat1, name ~ numbers)
Когда-то мне нужно было это сделать, и единственное кросс-браузерное надежное решение, с которым я столкнулся, - это взломать работу. Я не самый большой поклонник таких решений, но это, безусловно, дает правильный результат снова и снова.
Идея состоит в том, что вы клонируете элемент, удаляете любую ограничительную ширину и проверяете, является ли клонированный элемент более широким, чем оригинал. Если это так, вы знаете, что это будет усечено.
Например, используя jQuery:
var $element = $('#element-to-test');
var $c = $element
.clone()
.css({display: 'inline', width: 'auto', visibility: 'hidden'})
.appendTo('body');
if( $c.width() > $element.width() ) {
// text was truncated.
// do what you need to do
}
$c.remove();
Я сделал jsFiddle, чтобы продемонстрировать это, http: // jsfiddle.net/cgzW8/2/
Вы даже можете создать свой собственный псевдо-селектор для jQuery:
$.expr[':'].truncated = function(obj) {
var $this = $(obj);
var $c = $this
.clone()
.css({display: 'inline', width: 'auto', visibility: 'hidden'})
.appendTo('body');
var c_width = $c.width();
$c.remove();
if ( c_width > $this.width() )
return true;
else
return false;
};
Затем используйте его для поиска элементов
$truncated_elements = $('.my-selector:truncated');
Демонстрация: http://jsfiddle.net/cgzW8/293/
Надеюсь, это поможет, взломать, как есть.
Добавляя к ответу italo, вы также можете сделать это с помощью jQuery.
function isEllipsisActive($jQueryObject) {
return ($jQueryObject.width() < $jQueryObject[0].scrollWidth);
}
Кроме того, как заметил Дымки, вы можете использовать jQuery outerWidth () вместо width ().
function isEllipsisActive($jQueryObject) {
return ($jQueryObject.outerWidth() < $jQueryObject[0].scrollWidth);
}
$jQueryObject.width()
не является «правильным». потому что он не учитывает маржу ячеек. $jQueryObject.outerWidth()
.
– Ludovic Guillaume
18 October 2013 в 14:11
Ответ от italo очень хорош! Однако давайте немного уточним:
function isEllipsisActive(e) {
var tolerance = 2; // In px. Depends on the font you are using
return e.offsetWidth + tolerance < e.scrollWidth;
}
Если вы пытаетесь выполнить приведенный выше код и используете console.log
для печати значений e.offsetWidth
и e.scrollWidth
, вы заметите в IE, что даже когда у вас нет усечения текста, возникает разница значений 1px
или 2px
.
Итак, в зависимости от размер шрифта, который вы используете, допустим определенный допуск!
Самое простое (и кросс-браузерное) решение фактически сравнивает scrollWidth с clientWidth
Рабочий код здесь: https://stackoverflow.com/a/19156627/1213445
Я думаю, что лучший способ обнаружить это использование getClientRects()
, кажется, что каждый прямоугольник имеет одинаковую высоту, поэтому мы можем выкачать число строк с числом различных значений top
.
getClientRects
работают как , этот
function getRowRects(element) {
var rects = [],
clientRects = element.getClientRects(),
len = clientRects.length,
clientRect, top, rectsLen, rect, i;
for(i=0; i<len; i++) {
has = false;
rectsLen = rects.length;
clientRect = clientRects[i];
top = clientRect.top;
while(rectsLen--) {
rect = rects[rectsLen];
if (rect.top == top) {
has = true;
break;
}
}
if(has) {
rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
rect.width = rect.right - rect.left;
}
else {
rects.push({
top: clientRect.top,
right: clientRect.right,
bottom: clientRect.bottom,
left: clientRect.left,
width: clientRect.width,
height: clientRect.height
});
}
}
return rects;
}
getRowRects
работает как этот
, вы можете обнаружить как this
С помощью JQuery:
$('#divID').css('text-overflow')
Это выведет ваше свойство переполнения текста. Таким образом, вы можете проверить, было ли это многоточие:
if ($('#yourID').css('text-overflow') === 'ellipsis') {
// It has overflowed
} else {
// It has not
}
Попробуйте эту функцию JS, передав элемент span в качестве аргумента:
function isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
Все решения на самом деле не работали для меня, что работа сравнивала элементы scrollWidth
с scrollWidth
его родительского (или дочернего, в зависимости от того, какой элемент имеет триггер) .
Когда дочерний scrollWidth
выше, чем его родители, это означает, что .text-ellipsis
активен.
Когда event
является родительским элементом
function isEllipsisActive(event) {
let el = event.currentTarget;
let width = el.offsetWidth;
let widthChild = el.firstChild.offsetWidth;
return (widthChild >= width);
}
Когда event
является дочерним элементом
function isEllipsisActive(event) {
let el = event.currentTarget;
let width = el.offsetWidth;
let widthParent = el.parentElement.scrollWidth;
return (width >= widthParent);
}
elem.offsetWdith VS ele.scrollWidth Эта работа для меня! https://jsfiddle.net/gustavojuan/210to9p1/
$(function() {
$('.endtext').each(function(index, elem) {
debugger;
if(elem.offsetWidth !== elem.scrollWidth){
$(this).css({color: '#FF0000'})
}
});
});
Этот пример показывает всплывающую подсказку в таблице сотока с усеченным текстом. Является динамическим, основанным на ширине таблицы:
$.expr[':'].truncated = function (obj) {
var element = $(obj);
return (element[0].scrollHeight > (element.innerHeight() + 1)) || (element[0].scrollWidth > (element.innerWidth() + 1));
};
$(document).ready(function () {
$("td").mouseenter(function () {
var cella = $(this);
var isTruncated = cella.filter(":truncated").length > 0;
if (isTruncated)
cella.attr("title", cella.text());
else
cella.attr("title", null);
});
});
Демо: https://jsfiddle.net/t4qs3tqs/
Он работает со всей версией jQuery
Для тех, кто использует (или планирует использовать) принятый ответ от Christian Varga, обратите внимание на проблемы с производительностью.
Клонирование / манипулирование DOM таким образом вызывает DOM Reflow (см. объяснение DOM reflow здесь), который чрезвычайно ресурсоемкий.
Использование решения Christian Varga на 100+ элементах на странице вызвало задержку затухания 4 секунды, в течение которой поток JS заблокирован. Учитывая, что JS является однопоточным, это означает значительную задержку UX для конечного пользователя.
Ответ Italo Borssatto отвечает , это было примерно в 10 раз быстрее во время моего профилирования.
white-space: nowrap
. – Jakub Hampl 23 July 2014 в 10:31