Ionic-framework: El texto largo en los botones no se trunca

Creado en 14 oct. 2016 · 3Comentarios · Fuente: ionic-team/ionic-framework

Breve descripción del problema:

El texto largo en los botones no se trunca. Estoy usando los botones full y block

Si bien el botón tiene puntos suspensivos, como se muestra a continuación;

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

Esto no funciona, ya que la clase .button-inner tiene display: flex

¿Qué comportamiento esperas?

Mostrar puntos suspensivos.

Esto se puede hacer configurando la visualización de .button-inner a inline . Sin embargo, realmente no sé la razón por la que su pantalla es flexible.

¿Qué versión iónica? 2 RC.0

core feature request

Fuente

alan-agius4

👍2

Comentario más útil

¿Creo que el flex está ahí para ayudar con el centrado? No estoy seguro de cómo querrían arreglarlo, pero la única forma en que he podido arreglar algo como esto es darle otro niño interior. p.ej

```

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

.overflow-me{
desbordamiento: oculto;
desbordamiento de texto: puntos suspensivos;
}
```

ncapito en 28 nov. 2016

👍3 🎉1

Todos 3 comentarios

```

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

.overflow-me{
desbordamiento: oculto;
desbordamiento de texto: puntos suspensivos;
}
```

ncapito en 28 nov. 2016

👍3 🎉1

En realidad, esto es bastante complejo ya que los botones se usan en muchos componentes. Agregar un div interno a los botones causaría problemas en otros lugares, y cambiar la pantalla de flexible a en línea causa problemas con los botones que contienen íconos y enlaces ancla diseñados para parecerse a botones. Voy a eliminar esto del hito por ahora, ya que el código anterior de @ncapito funciona, pero volveré a tratar este problema.

brandyscarney en 5 dic. 2016

¡Gracias por el problema! Este problema se está cerrando debido a la inactividad. Si esto sigue siendo un problema con la última versión de Ionic, cree un nuevo problema y asegúrese de que la plantilla esté completa.

¡Gracias por usar Ionic!