Question

我有一个div，其中包含一些文本，最初没有包装并显示省略号但是我想让用户能够点击一个更多的阅读选项，然后展开div来显示整篇文章。

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

以下是我一直在努力修改的JS小提琴的链接：

来自它的代码：

＆＃13;

$(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...");
    }
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

是否可以检测文本是否足够短以适合div，然后隐藏read more选项？

Answer 1

您可以将DIV width与scrollWidth进行比较，以检测文字是否溢出：

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

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

Answer 2

有一个jQuery插件可以满足您的需求：http://jedfoster.com/Readmore.js/

Answer 3

这可能不完整，但你可能想根据jQuery为你提供的.height（）方法做一些事情（http://api.jquery.com/height/）

$(document).bind('pageshow', function() {
if($(".ui-li > div").height() > 20) {
    $(".ui-li > div").addClass("less");
    $(".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...");
        }
    });
} else {
    // one liner
     $(".text-size").hide();
}

}）;

在fiddler中检查我的解决方案。

http://jsfiddle.net/gZe8b/

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

3 个答案: