html - 带有省略号的动态文本旁边的图标

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>

希望这对您有所帮助!