アイコン省略記号

Question

とダイナミックテキストの隣に

私の質問は異なるが省略記号で切り詰められたテキストの後にアイコンを表示Sliding icon next to dynamic text with ellipsis

に似ています。 テキストが切り捨てられ、省略記号が表示されている場合にのみアイコンを表示します。

これは私が試したサンプルです。 https://jsfiddle.net/poonkave/6sfbhu9w/

問題は、テキストが短い場合でもアイコンが表示されます。

任意のCSSソリューションですか？

<div class="block-wrap"> 
<div class="block"> 
    <div class="icon"> 
    </div> 
    <div class="desc"> 
      This is a very very very 
      very very very very very very very 
      very very very very very very 
      very very very very very very 
      very very very very very very 
      very very long description 
    </div> 
</div> 

.block-wrap { 
    display: inline-block; 
    max-width: 100%; 
} 

.block { 
    width: 100%; 
} 

.desc { 
    display: block; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
} 

.icon { 
    float: right; 
    margin-left: 10px; 
    width: 20px; 
    height: 14px; 
    background-color: #333; 
} 

Answer 1

あり何の純粋なCSSのソリューションはありませんが、あなたはjavascriptを使用することができます。

私がしたのは、最初にテキストが存在するコンテナの幅（私の場合は.outer）を取得し、それをテキストを保持するテキストの幅と比較するか、省略記号のプロパティを使用します（私の場合.text）、条件が一致する場合はアイコンを表示します。

var outer_width_one = $('.outer.one').width(); 
 
var text_width_one =$('.outer.one .text').width(); 
 
if(text_width_one == outer_width_one) { 
 
    $('.outer.one .text').addClass('show'); 
 
} 
 
$('.results .outer_one_result .outer_one_div_width').text(outer_width_one); 
 
$('.results .outer_one_result .outer_one_text_width').text(text_width_one); 
 

 

 

 

 
var outer_width_two = $('.outer.two').width(); 
 
var text_width_two =$('.outer.two .text').width(); 
 
if(text_width_two == outer_width_two) { 
 
    $('.outer.two .text').addClass('show'); 
 
} 
 
$('.results .outer_two_result .outer_two_div_width').text(outer_width_two); 
 
$('.results .outer_two_result .outer_two_text_width').text(text_width_two);

.outer { 
 
    padding: 10px 20px 5px; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 

 
.text { 
 
    position: relative; 
 
    display: inline-block; 
 
    max-width: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    padding-right: 10px; 
 
} 
 

 
.text:after { 
 
    display: none; 
 
    content: '\f007'; 
 
    font-family: 'FontAwesome'; 
 
    width: auto; 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 0; 
 
    transform: translateY(-50%); 
 
} 
 

 
.text.show:after { 
 
    display: block; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="outer one"> 
 
    <strong>One (full length - shows icon):</strong><br> 
 
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat voluptatibus nam ducimus praesentium, deserunt, facilis aut minus incid corporis laborum velit optio illo quos! Corporis cupiditate pariatur, ratione voluptas! Quam.</div> 
 
</div> 
 

 
<div class="outer two"> 
 
    <strong>Two: (small length - no icon):</strong><br> 
 
    <div class="text">Lorem ipsum dolor</div> 
 
</div> 
 

 
<div class="results"> 
 
    <div class="outer_one_result"> 
 
    <ul> 
 
     <li>Outer Width (One): <strong class="outer_one_div_width"></strong></li> 
 
     <li>Text Width (One): <strong class="outer_one_text_width"></strong></li> 
 
    </ul> 
 
    </div> 
 
    <div class="outer_two_result"> 
 
    <ul> 
 
     <li>Outer Width (Two): <strong class="outer_two_div_width"></strong></li> 
 
     <li>Text Width (Two): <strong class="outer_two_text_width"></strong></li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

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

・ホープ、このことができます：

は、以下のスニペットを見てください！