Enveloppez un texte sur deux lignes seulement à l'intérieur d'un div.

Question

Je veux envelopper un texte dans seulement deux lignes à l'intérieur d'un div de largeur spécifique. Si le texte dépasse la longueur de deux lignes, je veux afficher des ellipses. Existe-t-il un moyen de faire cela en utilisant les CSS ?

par exemple

Sample text showing wrapping
of text in only two line...

Answer 1

Ce qui suit a fonctionné pour moi :

CSS :

.longWordBreakParent {
  display: flex;
}
.longWordBreak {
  word-break: break-all;
}

HTML :

<div className="longWordBreakParent">
    <span className='longWordBreak'>someverylongtextthatcannotbefitinoneline</span>
</div>

Answer 2

Dans tous ces exemples, supposons que nous avons :

#someDiv {
  width: 250px;
  overflow: hidden;
}