<分区>
我有一个 div，其中包含一些文本，最初不换行并显示省略号，但我想让用户能够单击阅读更多选项，然后将 div 展开为显示整段文字。
但是我希望能够检测文本是否足够小以适合 div 而无需从一行展开它，如果是这样则隐藏显示更多选项。
这是我一直在研究的修改后的 JS Fiddle 的链接:
以及其中的代码:
$(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，然后隐藏阅读更多选项？