Ionic-framework: Le texte long dans les boutons n'est pas tronqué

Créé le 14 oct. 2016 · 3Commentaires · Source: ionic-team/ionic-framework

Brève description du problème :

Le texte long dans les boutons n'est pas tronqué. J'utilise les boutons full et block

Bien que le bouton ait des points de suspension, comme indiqué ci-dessous ;

.button {
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Cela ne fonctionne pas, car la classe .button-inner a display: flex

Quel comportement attendez-vous ?

Afficher les points de suspension.

Cela peut être fait en réglant l'affichage de .button-inner sur inline . Cependant, je ne sais pas vraiment pourquoi son affichage est flexible.

Quelle version ionique ? 2 RC.0

core feature request

Source

alan-agius4

👍2

Commentaire le plus utile

Je pense que le flex est là pour aider au centrage ? Je ne sais pas comment vous voudriez tous le réparer, mais la seule façon dont j'ai pu réparer quelque chose comme ça est de lui donner un autre enfant intérieur. par exemple

```

I then put a class on `.overflow-me` to do the ellipsis.

.overflow-moi{
débordement caché;
débordement de texte : points de suspension ;
}
```

ncapito le 28 nov. 2016

👍3 🎉1

Tous les 3 commentaires

```

I then put a class on `.overflow-me` to do the ellipsis.

.overflow-moi{
débordement caché;
débordement de texte : points de suspension ;
}
```

ncapito le 28 nov. 2016

👍3 🎉1

C'est en fait assez complexe car les boutons sont utilisés dans de nombreux composants. L'ajout d'une div interne aux boutons entraînerait des problèmes ailleurs, et le changement de l'affichage de flex à inline entraîne des problèmes avec les boutons contenant des icônes et des liens d'ancrage conçus pour ressembler à des boutons. Je vais supprimer cela du jalon pour l'instant puisque le code ci-dessus par @ncapito fonctionne, mais je reviendrai sur ce problème.

brandyscarney le 5 déc. 2016

Merci pour le problème ! Ce problème est fermé pour cause d'inactivité. Si le problème persiste avec la dernière version d'Ionic, veuillez créer un nouveau problème et vous assurer que le modèle est entièrement rempli.

Merci d'utiliser Ionic !