значок рядом с динамическим текстом с многоточием

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>

Надеется, что это помогает!