Phát hiện dấu chấm lửng tràn văn bản HTML

Tôi có một bộ sưu tập các yếu tố khối trên một trang. Tất cả chúng đều có các quy tắc CSS không gian trắng, tràn, tràn văn bản để văn bản tràn được cắt bớt và sử dụng dấu chấm lửng.

Tuy nhiên, không phải tất cả các yếu tố tràn.

Có cách nào tôi có thể sử dụng javascript để phát hiện phần tử nào đang tràn không?

Cảm ơn.

Đã thêm: ví dụ cấu trúc HTML tôi đang làm việc.

<td><span>Normal text</span></td>
<td><span>Long text that will be trimmed text</span></td>

Các phần tử SPAN luôn nằm gọn trong các ô, chúng có quy tắc dấu chấm lửng được áp dụng. Tôi muốn phát hiện khi dấu chấm lửng được áp dụng cho nội dung văn bản của SPAN.

Đã có lúc tôi cần phải làm điều này, và giải pháp đáng tin cậy trên nhiều trình duyệt mà tôi gặp phải là hack job. Tôi không phải là fan hâm mộ lớn nhất của các giải pháp như thế này, nhưng nó chắc chắn tạo ra kết quả chính xác hết lần này đến lần khác.

Ý tưởng là bạn sao chép phần tử, loại bỏ bất kỳ chiều rộng giới hạn nào và kiểm tra xem phần tử nhân bản có rộng hơn bản gốc hay không. Nếu vậy, bạn biết nó sẽ bị cắt ngắn.

Ví dụ: sử dụng 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();

Tôi đã tạo một jsFiddle để chứng minh điều này, http://jsfiddle.net/cgzW8/2/

Bạn thậm chí có thể tạo bộ chọn giả tùy chỉnh của riêng mình cho 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;
};

Sau đó sử dụng nó để tìm các yếu tố

$truncated_elements = $('.my-selector:truncated');

Bản trình diễn: http://jsfiddle.net/cgzW8/293/

Hy vọng điều này sẽ giúp, hacky như nó là.

Hãy thử hàm JS này, chuyển phần tử span làm đối số:

function isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}

Thêm vào câu trả lời của italo, bạn cũng có thể thực hiện việc này bằng jQuery.

function isEllipsisActive($jQueryObject) {
    return ($jQueryObject.width() < $jQueryObject[0].scrollWidth);
}

Ngoài ra, như Smoky đã chỉ ra, bạn có thể muốn sử dụng jQuery outsWidth () thay vì width ().

function isEllipsisActive($jQueryObject) {
    return ($jQueryObject.outerWidth() < $jQueryObject[0].scrollWidth);
}

Đối với những người sử dụng (hoặc dự định sử dụng) câu trả lời được chấp nhận từ Christian Varga, vui lòng lưu ý các vấn đề về hiệu suất.

Nhân bản / thao tác DOM theo cách như vậy gây ra DOM Reflow (xem phần giải thích về trào ngược DOM ở đây) cực kỳ tốn tài nguyên.

Việc sử dụng giải pháp của Christian Varga trên hơn 100 thành phần trên một trang đã gây ra độ trễ phản xạ 4 giây trong đó luồng JS bị khóa. Xem xét JS là một luồng đơn, điều này có nghĩa là độ trễ UX đáng kể cho người dùng cuối.

Câu trả lời của Italo Borssatto phải là câu trả lời được chấp nhận, nó nhanh hơn khoảng 10 lần trong quá trình lập hồ sơ của tôi.

Trả lời từ italo là rất tốt! Tuy nhiên, hãy để tôi tinh chỉnh nó một chút:

function isEllipsisActive(e) {
   var tolerance = 2; // In px. Depends on the font you are using
   return e.offsetWidth + tolerance < e.scrollWidth;
}

Tương thích trình duyệt chéo

Trên thực tế, nếu bạn thử mã ở trên và sử dụng console.logđể in ra các giá trị của e.offsetWidthvà e.scrollWidth, bạn sẽ nhận thấy, trên IE, ngay cả khi bạn không cắt ngắn văn bản, có sự khác biệt về giá trị 1pxhoặc 2pxcó kinh nghiệm.

Vì vậy, tùy thuộc vào kích thước phông chữ bạn sử dụng, cho phép một dung sai nhất định!

elem.offsetWdith VS ele.scrollWidth Công việc này đối với tôi! https://jsfiddle.net/gustavojuan/210to9p1/

$(function() {
  $('.endtext').each(function(index, elem) {
    debugger;
    if(elem.offsetWidth !== elem.scrollWidth){
      $(this).css({color: '#FF0000'})
    }
  });
});

Mẫu này hiển thị chú giải công cụ trên bảng ô với văn bản bị cắt ngắn. Là động dựa trên chiều rộng bảng:

$.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);
    });
});

Bản trình diễn: https://jsfiddle.net/t4qs3tqs/

Nó hoạt động trên tất cả các phiên bản của jQuery

Tôi nghĩ rằng cách tốt hơn để phát hiện nó đang sử dụng getClientRects(), có vẻ như mỗi trực tràng có cùng chiều cao, vì vậy chúng ta có thể tính toán số dòng với số lượng topgiá trị khác nhau .

getClientRects Làm việc như này

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;
}

getRowRectslàm việc như thế này

bạn có thể phát hiện như thế này

Tất cả các giải pháp không thực sự hiệu quả với tôi, những gì đã làm là so sánh các yếu tố scrollWidthvớiscrollWidth cha mẹ của nó (hoặc con, tùy thuộc vào yếu tố nào có kích hoạt).

Khi đứa trẻ scrollWidthcao hơn cha mẹ, điều đó có nghĩa .text-ellipsislà hoạt động.

Khi nào eventlà phần tử cha

function isEllipsisActive(event) {
    let el          = event.currentTarget;
    let width       = el.offsetWidth;
    let widthChild  = el.firstChild.offsetWidth;
    return (widthChild >= width);
}

Khi nào eventlà phần tử con

function isEllipsisActive(event) {
    let el          = event.currentTarget;
    let width       = el.offsetWidth;
    let widthParent = el.parentElement.scrollWidth;
    return (width >= widthParent);
}

Các e.offsetWidth < e.scrollWidthgiải pháp không phải luôn luôn làm việc.

Và nếu bạn muốn sử dụng JavaScript thuần túy, tôi khuyên bạn nên sử dụng điều này:

(bản đánh máy)

public isEllipsisActive(element: HTMLElement): boolean {
    element.style.overflow = 'initial';
    const noEllipsisWidth = element.offsetWidth;
    element.style.overflow = 'hidden';
    const ellipsisWidth = element.offsetWidth;

    if (ellipsisWidth < noEllipsisWidth) {
      return true;
    } else {
      return false;
    }
}

Giải pháp @ItaloBorssatto là hoàn hảo. Nhưng trước khi nhìn vào SO - tôi đã đưa ra quyết định của mình. Đây rồi :)

const elems = document.querySelectorAll('span');
elems.forEach(elem => {
  checkEllipsis(elem);
});

function checkEllipsis(elem){
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const styles = getComputedStyle(elem);
  ctx.font = `${styles.fontWeight} ${styles.fontSize} ${styles.fontFamily}`;
  const widthTxt = ctx.measureText(elem.innerText).width;
  if (widthTxt > parseFloat(styles.width)){
    elem.style.color = 'red'
  }
}

span.cat {
    display: block;
    border: 1px solid black;
    white-space: nowrap;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

 <span class="cat">Small Cat</span>
      <span class="cat">Looooooooooooooong Cat</span>

Tôi thực hiện)

const items = Array.from(document.querySelectorAll('.item'));
items.forEach(item =>{
    item.style.color = checkEllipsis(item) ? 'red': 'black'
})

function checkEllipsis(el){
  const styles = getComputedStyle(el);
  const widthEl = parseFloat(styles.width);
  const ctx = document.createElement('canvas').getContext('2d');
  ctx.font = `${styles.fontSize} ${styles.fontFamily}`;
  const text = ctx.measureText(el.innerText);
  return text.width > widthEl;
}

.item{
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

      <div class="item">Short</div>
      <div class="item">Loooooooooooong</div>

có một số lỗi trong bản demo http://jsfiddle.net/brandonzylstra/hjk9mvcy/ được đề cập bởi https://stackoverflow.com/users/241142/iconoclast .

trong bản demo của mình, thêm các mã này sẽ hoạt động:

setTimeout(() => {      
  console.log(EntryElm[0].offsetWidth)
}, 0)