Count the number of (displayed) characters on the page

Question

I have a card with text, which is formed using text truncate depending on the width of the div. I need to make: if the text is truncated, then the button "show more" appears, respectively, if all the text is displayed, then the button disappeared. The problem is that methods like: textContent, innerText, ...lenght, etc. read the text from the page code, but it's always full there.

Answer 1

Basically:

.scrollWidth represents the total width of the content inside the content element, including any overflow or hidden content. It considers the entire width, regardless of whether it is visible within the parent container or not.

.clientWidth represents the visible width of the card element, which is the width available for content to be displayed within the card.

So you can check if the text should be truncated or not by comparing these values. Considering you have a react tag in your question, your code looks similar to these:

import React, { useState, useEffect } from 'react';

function Card() {
  const [isTextTruncated, setIsTextTruncated] = useState(false);

  useEffect(() => {
    const checkTextTruncation = () => {
      const card = document.getElementById('card');
      const content = document.getElementById('content');
      const showMoreButton = document.getElementById('showMoreButton');

      const isTruncated = content.scrollWidth > card.clientWidth;
      setIsTextTruncated(isTruncated);

      if (isTruncated) {
        showMoreButton.style.display = 'block';
      } else {
        showMoreButton.style.display = 'none';
      }
    };

    checkTextTruncation();

    window.addEventListener('resize', checkTextTruncation);
    return () => {
      window.removeEventListener('resize', checkTextTruncation);
    };
  }, []);

  const showMore = () => {
    const content = document.getElementById('content');
    content.style.whiteSpace = 'normal';
    content.style.textOverflow = 'clip';
    setIsTextTruncated(false);
  };

  return (
    <div id="card">
      <div id="content">
        {/* Render your text content here */}
      </div>
      {isTextTruncated && (
        <button id="showMoreButton" onClick={showMore}>
          Show More
        </button>
      )}
    </div>
  );
}

export default Card;