是否可以检测文本是否长于div中的一行？

Question

我有一个带有一些文本的div,它最初不会换行并显示省略号但是我想让用户能够点击一个更多的阅读选项,然后展开div来显示整段文本.

但是,我希望能够检测文本是否足够小以适应div而无需从一行扩展它,如果是这样,则隐藏show more选项.

这是一个改进的JS Fiddle的链接,我一直在努力:

http://jsfiddle.net/M2APS/44/

而它的代码:

HTML:

$(document).bind('pageshow', function() {
  $(".text-size").click(function() {
    $(".ui-li > div").toggleClass("less");
    if ($(".text-size").html() == "Read more...") {
      $(".text-size").html("Read less...");
    } else {
      $(".text-size").html("Read more...");
    }
  });
});

CSS:

.less {
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.more {
  white-space: normal;
}

.text-size {
  display: block;
  text-align: right;
  padding-top: 10px;
  color: blue !important;
  cursor: pointer;
}

JS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-role="page" id="p1">
  <div data-role="content">
    <ul data-role="listview" data-inset="true">
      <li data-role="list-divider">Item Title</li>
      <li>
        <div class="less">
          Need to detect if this text is long enough to show the "Read More" if it is not don't
        </div>
        <div class="text-size">Read more...</div>
      </li>
    </ul>
  </div>

</div>

是否可以检测文本是否足够短以适合div,然后隐藏更多选项？

Answer 1

您可以比较DIV width与scrollWidth检测,如果文字是满溢:

if ($('.less')[0].scrollWidth <= $('.less').width()) {
   $(".text-size").hide();
}

演示:http://jsfiddle.net/ygalanter/M2APS/50/