icon next to dynamic text with ellipsis - html

Question

my question is different but similar to Sliding icon next to dynamic text with ellipsis
Showing an icon after truncated text with ellipsis.
want to show icon ONLY if text is truncated and ellipsis shown.
Here is sample I tried.
https://jsfiddle.net/poonkave/6sfbhu9w/
issue is icon is still displayed even if text is short.
any CSS solution?
<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

There is no pure CSS Solution but you can use javascript.
What I've done is first getting the width of the container in which the text is present (in my case .outer) and comparing it to the width of the text which holds the text or has ellipsis property (in my case .text) and show the icon if condition matches.
Have a look at the snippet below:
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>
Hope this helps!