Deteksi elipsis teks-overflow HTML

Saya memiliki koleksi elemen blok pada halaman. Mereka semua memiliki aturan CSS white-space, overflow, set teks-overflow sehingga teks yang meluap dipangkas dan elipsis digunakan.

Namun, tidak semua elemen meluap.

Adakah saya bisa menggunakan javascript untuk mendeteksi elemen mana yang meluap?

Terima kasih.

Ditambahkan: contoh struktur HTML yang saya kerjakan.

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

Elemen SPAN selalu muat di dalam sel, mereka memiliki aturan elips yang diterapkan. Saya ingin mendeteksi kapan elipsis diterapkan ke konten teks SPAN.

Sekali waktu saya perlu melakukan ini, dan satu-satunya solusi yang dapat diandalkan lintas-browser saya temui adalah pekerjaan hack. Saya bukan penggemar solusi terbesar seperti ini, tetapi tentu saja menghasilkan hasil yang benar berulang kali.

Idenya adalah Anda mengkloning elemen, menghapus lebar ikatan apa pun, dan menguji apakah elemen yang dikloning lebih lebar dari aslinya. Jika demikian, Anda tahu itu akan terpotong.

Misalnya, menggunakan 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();

Saya membuat jsFiddle untuk mendemonstrasikan ini, http://jsfiddle.net/cgzW8/2/

Anda bahkan dapat membuat pemilih-semu kustom Anda sendiri untuk 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;
};

Kemudian gunakan untuk menemukan elemen

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

Demo: http://jsfiddle.net/cgzW8/293/

Semoga ini bisa membantu, hacky apa adanya.

Coba fungsi JS ini, dengan meneruskan elemen span sebagai argumen:

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

Menambahkan ke jawaban italo, Anda juga dapat melakukan ini menggunakan jQuery.

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

Juga, seperti yang ditunjukkan Smoky, Anda mungkin ingin menggunakan jQuery outerWidth () alih-alih lebar ().

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

Bagi mereka yang menggunakan (atau berencana untuk menggunakan) jawaban yang diterima dari Christian Varga, harap ketahui masalah kinerja.

Kloning / memanipulasi DOM sedemikian rupa menyebabkan DOM Reflow (lihat penjelasan tentang DOM reflow di sini) yang sangat intensif sumber daya.

Menggunakan solusi Christian Varga pada 100+ elemen pada halaman menyebabkan penundaan reflow selama 4 detik di mana utas JS dikunci. Mengingat JS adalah single-threaded, ini berarti penundaan UX yang signifikan bagi pengguna akhir.

Italo Borssatto ini jawabannya harus menjadi salah satu yang diterima, itu kira-kira 10 kali lebih cepat selama profiling saya.

Jawaban dari italo sangat bagus! Namun izinkan saya sedikit memperbaikinya:

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

Kompatibilitas lintas browser

Jika, pada kenyataannya, Anda mencoba kode di atas dan menggunakannya console.loguntuk mencetak nilai-nilai e.offsetWidthdan e.scrollWidth, Anda akan melihat, di IE, bahwa, bahkan ketika Anda tidak memiliki pemotongan teks, perbedaan nilai 1pxatau2px dialami.

Jadi, tergantung pada ukuran font yang Anda gunakan, izinkan toleransi tertentu!

elem.offsetWdith VS ele.scrollWidth Ini bekerja untuk saya! https://jsfiddle.net/gustavojuan/210to9p1/

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

Sampel ini menunjukkan tooltip pada tabel sel dengan teks terpotong. Dinamis berdasarkan lebar tabel:

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

Demo: https://jsfiddle.net/t4qs3tqs/

Ini bekerja pada semua versi jQuery

Saya pikir cara yang lebih baik untuk mendeteksinya adalah menggunakan getClientRects(), tampaknya setiap kotak memiliki tinggi yang sama, sehingga kita dapat menghitung angka garis dengan jumlah topnilai yang berbeda .

getClientRectsbekerja seperti ini

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

getRowRectsbekerja seperti ini

Anda dapat mendeteksi seperti ini

Semua solusi yang tidak benar-benar bekerja untuk saya, apa yang lakukan pekerjaan yang membandingkan elemen scrollWidthkescrollWidth induknya (atau anak, tergantung pada elemen memiliki pemicu).

Ketika anak scrollWidthlebih tinggi dari orang tuanya, itu berarti .text-ellipsisaktif.

Kapan eventelemen induk

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

Kapan eventelemen anak

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

Itu e.offsetWidth < e.scrollWidth solusi tidak selalu bekerja.

Dan jika Anda ingin menggunakan JavaScript murni, saya sarankan untuk menggunakan ini:

(naskah)

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

Solusi @ItaloBorssatto sempurna. Tetapi sebelum melihat SO - saya membuat keputusan. Ini dia :)

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>

Implementasi saya)

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>

ada beberapa mistasks dalam demo http://jsfiddle.net/brandonzylstra/hjk9mvcy/ disebutkan oleh https://stackoverflow.com/users/241142/iconoclast .

dalam demo-nya, tambahkan kode ini akan berfungsi:

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