J'ai défini le style comme indique ci-dessous.
div>span {
display: flex;
flex: 1 0 0;
align-self: center;
align-items: center;
justify-content: flex-end;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
3 Réponses :
Vous ne pouvez pas utiliser p> Affichage: flex code> et Text-Overflow: ellipsis code> sur le même élément, vous pouvez faire comme ceci:
<span>
This is a block-level element
</span>
Malheureusement, vous ne pouvez pas utiliser Flex pour la portée : Ceci est tout simplement faux
J'ai nettoyé ma réponse. Ce que je voulais dire était que vous ne pouvez pas utiliser l'affichage: Flex et réalisez le débordement de texte: ellipsis (sur le même élément), est-ce faux?
Le seul moyen d'utiliser p> Text-Overflow: ellipsis; code> en conjonction avec Flex-Box est démontré dans l'exemple suivant:
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et earum quo tenetur, neque facilis voluptates odio. Neque, facere totam sit!</span>
</div>
Le problème ici est avec l'affichage Ce que je suggère est de Pour envelopper l'étiquette dans une balise p> : flex code> appliqué à l'élément code> Vous souhaitez ajouter des ellipsis à. Changer que sur Affichage: Inline-Block code> ou Block CODE> corrigerait le problème, mais je comprends pourquoi vous souhaitez utiliser Flex sur l'élément de l'espace. code> code>. Ensuite, appliquez les ellipsis CSS à l'élément interne interne nouvellement créé (voici un Exemple de travail .): p>
<div>
<span><span>{{caption}}</span></span>
<input type="text"
placeholder="{{caption}}"
[ngModel]="value">
</div>
Explication ici: Stackoverflow.com/a/55042003/8620333