e.offsetWidthが間違った値を返します

Question

私のアプリケーションでは、テキストオーバーフロー（省略記号）があるかどうかチェックしたいと思います。そしてそのために私はe.offsetWidth < e.scrollWidthをチェックしていますが、等しい値を返します。つまり、offsetWidthはを返します。の値を返します。

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

ここに私の実装です

私は（jQueryのに頼らず）、純粋なJSのプロパティを使用したい

Answer 1

あなたのJavascriptコードは大丈夫です、あなたのdivには内容がありませんので、問題はそうoffsetWidthは画面幅に等しいとscrollWidthも同じです比較がfalseを返します画面幅に、ように、比較される2つの要素が同じ値画面幅を持っているので、あなたのlessdescription divの中にいくつかのテキストを追加してみてください