Check If Content Overflows An Element - jQuery overflowing

overflowing is a lightweight yet useful jQuery plugin that checks if an element's content overflows its parent container and executes a callback function when the content is overflowed.

How to use it:

1. Download and place the JavaScript file jquery.overflowing.js after jQuery library (slim build).

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous"></script>
<script src="jquery.overflowing.js"></script>

2. To detect if the paragraph overflows its parent container, follow this step:

<div class="container">
  <div class="inner">
    <p class="targetElement">
      Your Long Content Here
      ...
      ...
      ...
      ...
      ...
      ...
      ...
      ...
      ...
    </p>
  </div>
</div>

3. The JavaScript to execute a callback function once the paragraph overflows the .container and output the result in the console log.

$('.targetElement').overflowing('.container', function(overflowed) { 
  console.log('This element is being overflowed', overflowed)
})

r.fn.init(1)
0: div.container.overflowed
length: 1
prevObject: [document]
__proto__: Object(0)

---

This awesome jQuery plugin is developed by kevinmarx. For more Advanced Usages, please check the demo page or visit the official website.