Если текст переполняет родительский элемент, добавьте класс

Question

У меня есть элемент, который потенциально может содержать длинный текст. Я ищу функцию jQuery, чтобы определить, переполняет ли текст ширину или высоту элемента, и если это так, класс должен быть добавлен к родительскому элементу. (Я не ищу свойство текстового многоточия.)

Как это можно сделать? Я начал fiddle here. Очевидно, что это не работает с $(elm).text().width(). Как получить ширину текста()?

Answer 1

clone во временный элемент, измените styles и сравните весы с исходным элементом, и, наконец, удалите этот временный объект и верните результат сравнения.

$.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; 
 
}; 
 
$(".title:truncated").addClass("text-style");

.title { 
 
    width: 300px; 
 
    overflow: hidden; 
 
    height: 20px; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 

 
.text-style { 
 
    color: red; 
 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="title">A very long title title title - if I break I must have the class "text-style" appended</div> 
 
<div class="title">A very long title title title </div>

Демо: https://jsfiddle.net/kishoresahas/6mL79xdL/8