Saltar al contenido

Iónico: ¿Cómo mostrar un elemento de iones en varias líneas?

Solución:

Para los usuarios de Ionic 2, puede utilizar text-wrap atributo como:

<ion-item text-wrap>
  Multiline text that should wrap when it is too long to fit on one line in the item.
</ion-item>

También puede ver la Documentación de atributos de utilidad para conocer los atributos que se pueden agregar a ion-item para transformar el texto.

EDITAR: Aunque se marcó como aceptado, esta respuesta se escribió para una versión anterior de Ionic. Lo más probable es que desee una de las respuestas a continuación para las versiones más nuevas.

La clase item-text-wrap debería ayudarte, así:

<ion-item class="item item-text-wrap">
  bio: <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </b>
</ion-item>

En Ionic v4 puedes adjuntar el text-wrap atribuir a la ion-label componente dentro de un ion-item. Por ejemplo:

<ion-item>
  <ion-label text-wrap>
    Multiline text that should wrap when it is too long to fit on one line in the item.
  </ion-label>
</ion-item>

EDITAR para Ionic v5:
Los atributos de CSS iónico están obsoletos y no funcionarán en v5. reemplazar etiquetas de atributo (p. ej., <ion-label text-wrap>) con clases iónicas (p. ej., <ion-label class="ion-text-wrap">). Por ejemplo:

<ion-item>
  <ion-label class="ion-text-wrap">
    Multiline text that should wrap when it is too long to fit on one line in the item.
  </ion-label>
</ion-item>

Esto también funcionará para v4

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *