是否可以检测我的 div 中的文本是否超过一行？ [复制]答案

【问题标题】：Is it possible to detect if text is longer than one line in my div? [duplicate]是否可以检测我的 div 中的文本是否超过一行？ [复制]
【发布时间】：2014-07-07 18:18:40
【问题描述】：

我有一个div，其中包含一些最初不换行并显示省略号的文本，但我想让用户能够单击阅读更多选项，然后展开 div 以显示整个文本。

但是，我希望能够检测文本是否足够小以适合 div，而无需从一行扩展它，如果是，则隐藏显示更多选项。

这是我一直在研究的修改过的 JS Fiddle 的链接：

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

以及其中的代码：

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

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

<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，然后隐藏阅读更多选项？

【问题讨论】：

仅供参考，从 jQuery 1.7 开始，.on() 方法是将事件处理程序附加到文档的首选方法。

标签： javascript css html

【解决方案1】：

您可以比较 DIV width 和 scrollWidth 来检测文本是否溢出：

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

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

【讨论】：

这仅适用于桌面上的全宽屏幕。是否可以将其动态应用于不同的屏幕尺寸，因为我的移动网站将在一系列不同的手机和平板电脑上查看，而这似乎不起作用？
你可以尝试给 DIV 固定宽度吗？可以根据当前屏幕宽度计算，在JS代码中以像素为单位赋值。

【解决方案2】：

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

【讨论】：

【解决方案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();
}

});

在提琴手中检查我的解决方案。

http://jsfiddle.net/gZe8b/

【讨论】：