Is it possible to detect if text is longer than one line in my div?

Question

I have a div with some text in it that initially doesn't wrap and shows an ellipsis but I want to give the user the ability to click a read more option and then expand the div to show the entire piece of text.

However I want to be able to detect if the text is small enough to fit in the div without needing to expand it from one line and if so hide the show more option.

Here is a link to a modified JS Fiddle I have been working off:

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

And the code from it:

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

Is it possible to detect if the text is short enough to fit within the div and then hide the read more option?

FYI as of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. — j08691, May 19 '14 at 17:37

score 8 · Accepted Answer · answered May 19 '14 at 17:31

8

You can compare DIV width with scrollWidth to detect if text is overflowing:

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

Demo: http://jsfiddle.net/ygalanter/M2APS/50/

answered May 19 '14 at 17:31

Yuriy Galanter

38,833
15
69
136

This is only working for me for full width screens on a desktop. Is there away to dynamically apply this to different screen sizes as my mobile website will be viewed across a range of different handsets and tablets and on them this doesn't seem to work? – Donal Rafferty May 20 '14 at 08:59
1

Can u try giving the DIV fixed width? It can be calculated based on current screen width and assigned in pixels in JS code. – Yuriy Galanter May 20 '14 at 13:39

score 0 · Answer 2 · answered May 19 '14 at 17:32

This is probably incomplete, but you might want to do something based on the .height() method that jQuery provides you (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();
}

});

Check my solution in fiddler.

http://jsfiddle.net/gZe8b/

Is it possible to detect if text is longer than one line in my div?

2 Answers2