Determine If an HTML Element'S Content Overflows

Determine if an HTML element's content overflows

Normally, you can compare the client[Height|Width] with scroll[Height|Width] in order to detect this... but the values will be the same when overflow is visible. So, a detection routine must account for this:

// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
function checkOverflow(el)
{
   var curOverflow = el.style.overflow;

   if ( !curOverflow || curOverflow === "visible" )
      el.style.overflow = "hidden";

   var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight;

   el.style.overflow = curOverflow;

   return isOverflowing;
}

Tested in FF3, FF40.0.2, IE6, Chrome 0.2.149.30.

Check if an element's content is overflowing?

If you want to show only an identifier for more content, then you can do this with pure CSS. I use pure scrolling shadows for this. The trick is the use of background-attachment: local;. Your css looks like this:

.scrollbox {  overflow: auto;  width: 200px;  max-height: 200px;  margin: 50px auto;
  background:    /* Shadow covers */    linear-gradient(white 30%, rgba(255,255,255,0)),    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,        /* Shadows */    radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),    radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;  background:    /* Shadow covers */    linear-gradient(white 30%, rgba(255,255,255,0)),    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,        /* Shadows */    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;  background-repeat: no-repeat;  background-color: white;  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;    /* Opera doesn't support this in the shorthand */  background-attachment: local, local, scroll, scroll;}

<div class="scrollbox">  <ul>    <li>Not enough content to scroll</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>  </ul></div>

<div class="scrollbox">  <ul>    <li>Ah! Scroll below!</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>    <li>7</li>    <li>8</li>    <li>9</li>    <li>10</li>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>    <li>7</li>    <li>8</li>    <li>The end!</li>    <li>No shadow there.</li>  </ul></div>

Is there anyway to check if an element has overflowed?

I assume you're referring to the overflow css property of DOM nodes. In that case you could compare the scrollWidth as opposed to the clientWidth.

Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

HTML text-overflow ellipsis detection

Once upon a time I needed to do this, and the only cross-browser reliable solution I came across was hack job. I'm not the biggest fan of solutions like this, but it certainly produces the correct result time and time again.

The idea is that you clone the element, remove any bounding width, and test if the cloned element is wider than the original. If so, you know it's going to have been truncated.

For example, using jQuery:

var $element = $('#element-to-test');
var $c = $element
           .clone()
           .css({display: 'inline', width: 'auto', visibility: 'hidden'})
           .appendTo('body');

if( $c.width() > $element.width() ) {
    // text was truncated. 
    // do what you need to do
}

$c.remove();

I made a jsFiddle to demonstrate this, http://jsfiddle.net/cgzW8/2/

You could even create your own custom pseudo-selector for jQuery:

$.expr[':'].truncated = function(obj) {
  var $this = $(obj);
  var $c = $this
             .clone()
             .css({display: 'inline', width: 'auto', visibility: 'hidden'})
             .appendTo('body');

  var c_width = $c.width();
  $c.remove();

  if ( c_width > $this.width() )
    return true;
  else
    return false;
};

Then use it to find elements

$truncated_elements = $('.my-selector:truncated');

Demo: http://jsfiddle.net/cgzW8/293/

Hopefully this helps, hacky as it is.

Check if overflow:hidden div is overflowing jQuery

Try this....

if (element.offsetHeight < element.scrollHeight ||element.offsetWidth < element.scrollWidth) {
     // your element have overflow
 } else {
  // your element doesn't have overflow
 }

if ($("#myoverflowingelement").prop('scrollWidth') > 
 $("#myoverflowingelement").width() ) {
  alert("this element is overflowing !!");  
}
else {
  alert("this element is not overflowing!!"); 
}

refer this link Check with jquery if div has overflowing elements

How to check if a div is overflowing in react functional component

As Jamie Dixon suggested in the comment, I used useLayoutEffect hook to set showLink true. Here is the code

Component

import React from "react";
import "./styles.css";

export default function App(props) {
  const ref = React.createRef();
  const [showMore, setShowMore] = React.useState(false);
  const [showLink, setShowLink] = React.useState(false);

  React.useLayoutEffect(() => {
    if (ref.current.clientWidth < ref.current.scrollWidth) {
      setShowLink(true);
    }
  }, [ref]);

  const onClickMore = () => {
    setShowMore(!showMore);
  };

  return (
    <div>
      <div ref={ref} className={showMore ? "" : "container"}>
        {props.text}
      </div>
      {showLink && (
        <span className="link more" onClick={onClickMore}>
          {showMore ? "show less" : "show more"}
        </span>
      )}
    </div>
  );
}

CSS

.container {
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 200px;
}

.link {
  text-decoration: underline;
  cursor: pointer;
  color: #0d6aa8;
}

How to detect overflow in div element?

You can easily do that by comparing scrollHeight with clientHeight, try the following:

<script type="text/javascript">
function GetContainerSize ()
{
    var container = document.getElementById ("tempDiv");
    var message = "The width of the contents with padding: " + container.scrollWidth + "px.\n";
    message += "The height of the contents with padding: " + container.scrollHeight + "px.\n";

    alert (message);
}
</script>

For more information please take a look at: http://help.dottoro.com/ljbixkkn.php

Detect if text has overflowed

If you are using jQuery, you can try comparing the div's width to its scrollWidth.

if ($('#div-id')[0].scrollWidth >  $('#div-id').innerWidth()) {
    //Text has over-flown
}

Is there a way to find out if the text is overflowing and use it as a condition in code?

I created a STACKBLITZ demonstrating conditionally adding title attribute to div element. I assume that ellipsed element has overflow: hidden style.

the code:

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      ellipsed: false
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.myRef.current.innerHTML = event.target.value;
    const {scrollWidth, offsetWidth} = this.myRef.current;
    // add 2 pixels due to border
    const newEllipsed = scrollWidth - offsetWidth > 2;
    if (newEllipsed !== this.state.ellipsed) {
      this.setState(prevState => ({
        ...prevState,
        ellipsed: newEllipsed
      }));
    }
  }

  myRef = React.createRef();

  render() {
    return (
      <div>
        <textarea onChange={this.handleChange} ></textarea>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
        <div id="ellipsed" 
             {...this.state.ellipsed && {title: this.myRef.current.innerHTML}}
             ref={this.myRef}></div>
      </div>
    );
  }
}

Determine If an HTML Element'S Content Overflows