e.offsetWidth gibt falschen Wert zurück

Question

In meiner Anwendung möchte ich prüfen, ob es Text-Überlauf (Ellipse) gibt. Und dafür bin ich überprüfen e.offsetWidth < e.scrollWidth, aber sie geben den gleichen Wert, bedeutet offsetWidth gibt falsche Wert zurück. Hier ist die meine Implementierung:

CSS:

.less{ 
    display: block; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
} 
.complete{ 
    word-wrap: break-word; 
} 

.collapse{ 
    color:blue; 
    font-size:13px; 
    cursor:pointer; 
} 

.hideElement{ 
display: none; 
} 

#seemore:after{ 
    content: " \000BB"; 
} 
#seeless:before{ 
    content:"\000AB\ "; 
} 

#description { 
    width: 100%; 
    overflow: hidden; 
} 

HTML:

<div id = "description"> 
    <div id="lessdescription" class="less"></div> 
    <div id="seemore" class="collapse"></div> 
    <div id="seeless" class="collapse hideElement"></div> 
</div> 

JS

function manageReportDescription() { 
    var descriptionElement = document.getElementById("lessdescription"); 

    return descriptionElement.offsetWidth < descriptionElement.scrollWidth; 
} 

Ich möchte Eigenschaften reine JS verwenden (ohne auf jQuery unter Berufung)

Answer 1

Sie Javascript-Code ist in Ordnung, das Problem ist, weil es auf Bildschirmbreite und scrollWidth kein Text in Ihrer div so offsetWidth gleich ist, ist auch gleich auf Bildschirmbreite, so wird der Vergleich false zurück, weil die beiden verglichenen Elemente den gleichen Wert Bildschirmbreite haben, versuchen Sie einen Text in Ihrem lessdescription div Hinzufügen