Is it possible to detect if text is exceeding its designated space and incorporate this as a condition within the code?

Question

Is it possible to detect if text is exceeding its designated space and incorporate this as a condition within the code?

I've created a React component (A) that displays some text. When the text exceeds the available space, I want to display a tooltip - another component with the full text. In my CSS file, I've defined that A has the text-overflow property set to "ellipsis".

This project is implemented using JavaScript (React) and Less.

I'm curious to know if there's a way to determine if ellipses are present (indicating text overflow), and based on that, dynamically render the additional component.

javascript css reactjs

Answer 1

Answer №1

I put together a STACKBLITZ to showcase how to conditionally add a title attribute to a div element when it is ellipsed with an overflow: hidden style.

Here is the code snippet:

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;
    // adding 2 pixels for 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>
    );
  }
}

Answer 2

I put together a STACKBLITZ to showcase how to conditionally add a title attribute to a div element when it is ellipsed with an overflow: hidden style.

Here is the code snippet:

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;
    // adding 2 pixels for 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>
    );
  }
}

Answer 3

Answer №2

To implement the ellipsis style on a tag element that holds text, add this code:

text-overflow: ellipsis;

https://www.w3schools.com/cssref/pr_text_text-overflow.asp

Answer 4

To implement the ellipsis style on a tag element that holds text, add this code:

text-overflow: ellipsis;

https://www.w3schools.com/cssref/pr_text_text-overflow.asp

Answer 5

Answer №3

Just like @sulten-h pointed out, there is a question on Stack Overflow that covers a similar topic to yours. However, I think your question deserves attention especially in the context of React.

In the code example below, I demonstrate how you can apply the solution from that question to a React application. Keep in mind that there are other ways to solve this problem as well.

You can view the implementation here: https://codesandbox.io/embed/text-overflow-bomo3

Take a look and see if it fits your requirements.

I hope this information proves helpful to you.

Answer 6

Just like @sulten-h pointed out, there is a question on Stack Overflow that covers a similar topic to yours. However, I think your question deserves attention especially in the context of React.

In the code example below, I demonstrate how you can apply the solution from that question to a React application. Keep in mind that there are other ways to solve this problem as well.

You can view the implementation here: https://codesandbox.io/embed/text-overflow-bomo3

Take a look and see if it fits your requirements.

I hope this information proves helpful to you.

Is it possible to detect if text is exceeding its designated space and incorporate this as a condition within the code?

Answer №1

Answer №2

Answer №3

Similar questions

CodeMirror's styling becomes inconsistent during state changes or component re-renders in Next.js. Although everything appears to function correctly during development, issues arise in production

retrieving data from a php file using ajax for a post request

Encountered an unusual IP address while attempting to start yarn - EADDRNOTAVAIL

Having trouble retrieving a hidden value in JavaScript when dealing with multiple records in a Coldfusion table

Obtaining the Immediate ID of a Widget using JQuery

problem with saving session data

Choosing a menu option with jQuery

Encountering the error message "Unable to access property 'addEventListener' of null while trying to manipulate innerHTML"

Retrieving information through callback functions

The use of `await` within a loop may not function as anticipated when the code is being run through Puppeteer, yet it functions flawlessly when executed in the browser's console

The embedded content within the iframe is failing to display on the screen even after verifying the onload event using

What could be causing my image not to show up on ReactJS?

Is it possible to target all children with CSS3 if a certain number of children are present?

Is there a way to convert an array into a single comma-separated value using parameters?

jQuery doesn't seem to function properly upon initial click

Embellishing Your Website with Unique Cursor Styles

JavaScript challenge at an electronics store coding competition

React Functional Component not working properly following package update

The HTML page abruptly cuts off halfway without allowing the user to scroll further

"Using the power of jQuery to efficiently bind events to elements through associative