Javascript 是否可以检测文本在我的div中是否超过一行？

我有一个

div

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

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

下面是一个链接，指向我一直在使用的修改过的JS小提琴：

以及其中的代码：

$（document）.bind（'pageshow'，function（）{
$（“.text size”）。单击（函数（）{
$（.ui li>div”）.toggleClass（“更少”）；
如果（$（“.text size”）.html（）==“阅读更多…”）{
$（“.text size”）.html（“少读…”）；
}否则{
$（“.text size”）.html（“阅读更多…”）；
}
});
});
.less{
单词包装：打断单词；
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；
}
.更多{
空白：正常；
}
.文本大小{
显示：块；
文本对齐：右对齐；
填充顶部：10px；
颜色：蓝色！重要；
光标：指针；
}


项目标题

需要检测此文本是否足够长以显示“Read More”（阅读更多），如果不是，则不显示
阅读更多。。。


您可以将DIV
宽度
与
滚动宽度
进行比较，以检测文本是否溢出：

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

if（$（'.less'）[0].scrollWidth有一个jQuery插件可以满足您的需要：
这可能不完整，但您可能希望根据jQuery提供的.height（）方法来做一些事情（）

}))

在fiddler中检查我的解决方案

FYI从jQuery 1.7开始，.on（）方法是将事件处理程序附加到文档的首选方法。这仅适用于桌面上的全屏幕。当我的手机网站将在一系列不同的手机和平板电脑上浏览时，是否可以动态地将其应用于不同的屏幕大小，而在这些手机和平板电脑上，这似乎不起作用？你可以尝试将DIV设置为固定宽度吗？它可以根据当前屏幕宽度计算，并在JS代码中以像素为单位分配。
$(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();
}