Ionic-framework: Texto longo nos botões não sendo truncado

Criado em 14 out. 2016 · 3Comentários · Fonte: ionic-team/ionic-framework

Breve descrição do problema:

O texto longo nos botões não está sendo truncado. Estou usando os botões full e block

Enquanto o botão tem reticências, como mostrado abaixo;

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

Isso não funciona, pois a classe .button-inner tem display: flex

Que comportamento você está esperando?

Exibir reticências.

Isso pode ser feito definindo a exibição de .button-inner para inline . No entanto, eu realmente não sei o motivo de sua exibição ser flexível.

Qual versão iônica? 2 RC.0

core feature request

Fonte

alan-agius4

👍2

Comentários muito úteis

Eu acho que o flex existe para ajudar na centralização? Não tenho certeza de como todos vocês gostariam de consertá-lo, mas a única maneira de consertar algo assim é dar a ele outra criança interior. por exemplo

```

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

.overflow-me{
estouro: oculto;
estouro de texto: reticências;
}
```

ncapito em 28 nov. 2016

👍3 🎉1

Todos 3 comentários

```

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

.overflow-me{
estouro: oculto;
estouro de texto: reticências;
}
```

ncapito em 28 nov. 2016

👍3 🎉1

Na verdade, isso é bastante complexo, pois os botões são usados em muitos componentes. Adicionar um div interno aos botões causaria problemas em outros lugares, e alterar a exibição de flex para inline causa problemas com botões contendo ícones e links de âncora com estilo para se parecer com botões. Vou remover isso do marco por enquanto, pois o código acima de @ncapito funciona, mas vou revisitar esse problema.

brandyscarney em 5 dez. 2016

Obrigado pelo problema! Este problema está sendo encerrado devido à inatividade. Se isso ainda for um problema com a versão mais recente do Ionic, crie um novo problema e verifique se o modelo está totalmente preenchido.

Obrigado por usar o Ionic!