jQuery：コンテンツが表示されていない場合、テキストを動的に切り捨てるにはどうすればよいですか？

Question

コンテンツが表示されていない場合、テキストを動的に切り捨てるにはどうすればよいですか？

• 私は切り捨てるするテキスト要素のサイズがわからない：

  は、ここで私が対処しなければならない二つの問題があります。

• 要素には特定のクラスがありません。

は、だから私は、完全に見えないしている要素を見つける必要があると私は、この要素の多くが表示されている方法を見つける必要があります。次に、この要素にインラインスタイルを追加できます。

.truncate { 
    width: 250px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

項目を通じて

/* Toggle size of container */ 
 
$(".toggle-size").click(function() { 
 
    $(".container").toggleClass("wide"); 
 
});

body{ 
 
text-align: center; 
 
    font-family: sans-serif; 
 
} 
 

 
.container{ 
 
    width: 500px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.container.wide{ 
 
    width: 655px; 
 
} 
 

 
.toggle-size{ 
 
    display: block; 
 
    background: #07C; 
 
    color: #fff; 
 
    position: relative; 
 
    line-height: 60px; 
 
    margin: 50px; 
 
    font-weight: 400; 
 
    cursor: pointer; 
 
} 
 

 

 
ul.options{ 
 
    width: 100%; 
 
    counter-reset: section; 
 
    white-space: nowrap; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul.options li{ 
 
    display: inline-block; 
 
    background: #f5f5f5; 
 
    color: #039BE5; 
 
    padding: 0 25px; 
 
    height: 55px; 
 
    line-height: 55px; 
 
    font-size: 14px; 
 
    margin: 0 -4px 0 0 !important; 
 
    border-top: 1px solid #e8e8e8; 
 
    border-left: 1px solid #e8e8e8; 
 
    border-bottom: 1px solid #e8e8e8; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="toggle-size">Toggle Size</div> 
 

 
<div class="container"> 
 
<ul class="options"> 
 
<li>Option description 1</li> 
 
<li>Option description 2</li> 
 
<li>Option description 3</li> 
 
<li>Option description 4</li> 
 
<li>Option description 5</li> 
 
<li>Option description 6</li> 
 
<li>Option description 7</li> 
 
<li>Option description 8</li> 
 
<li>Option description 9</li> 
 
</ul> 
 
</div>

Answer 1

ループ以下のスクリプトを見て、内側の幅がテキストを表示するのに十分であるかどうかを確認してください

var listItems = $("#options li"); 
listItems.each(function(idx, li) { 
    var item = $(li); 
    if (item.scrollWidth > $('#options').innerWidth()) { 
     //If true, it means text does not fit in the container 
     //Apply your class or css here 
    } 
}); 

私はこれをテストしていませんが、それはあなたにアイデアを与える必要があります