1
votes

Existe-t-il un moyen de savoir si le texte déborde et de l'utiliser comme condition dans le code?

J'ai un composant de réaction (A) qui rend du texte. Si le texte déborde, j'aimerais afficher une info-bulle - un autre composant avec du texte intégral. Dans le fichier css, j'ai défini que A a une propriété de dépassement de texte définie comme "points de suspension".

Utilisation de JS (react) et moins.

Je voudrais savoir s'il y a une possibilité de savoir s'il y a des ellipses (le texte déborde) et d'après cela, il suffit de rendre aussi l'autre composant.

javascript reactjs css

2 commentaires

Double-possible de Déterminer si le contenu d'un élément HTML déborde

Merci! Je n'ai rien trouvé de similaire.

3 Réponses :

0
votes

Vous pouvez utiliser ce style dans votre élément de balise qui contient le texte:

text-overflow: ellipsis;

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

0 commentaires

0
votes

Comme @ sulten-h l'a mentionné, cette question est similaire à celle que vous demandent maintenant . Néanmoins, j'ai l'impression que le vôtre attire l'attention étant donné que c'est dans le contexte de React.

Dans l'exemple suivant, j'utilise la réponse à cette question sur une application React. Ce n'est en aucun cas la seule solution.

https://codesandbox.io/embed/text-overflow-bomo3

Vérifiez-le et voyez s'il répond à vos besoins.

J'espère que cela vous aidera.

0 commentaires

1
votes

J'ai créé un STACKBLITZ démontrant l'ajout conditionnel du titre attribut à l'élément div . Je suppose que l'élément ellipsé a un style overflow: hidden .

le 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>
    );
  }
}

0 commentaires