旁邊的圖標動態文本用省略號

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>

希望這有助於！