Как добавить новую строку в теге ion-option?

Question

Нужна новая строка после названия компании в раскрывающемся списке.

Я перепробовал все, также вставил тег <p> & <br>.

<ion-item>
    <ion-label>select</ion-label>
    <ion-select okText="Okay" cancelText="Dismiss">
    <ion-option value="1"> company1 address1</ion-option>
    <ion-option value="2">company2  address1</ion-option>
    <ion-option value="2">company3 address3</ion-option>
    <ion-option value="4">company4 address4</ion-option>
    </ion-select>
 </ion-item>

Я хочупоказать адрес в новой строке.Я пробовал тег HTML также между компанией и адресом.company & address - это два разных текста.

После использования тега он отображается в одной строке.

Обновлено: я знаю, что тег HTML не будет работать в ion-option.Есть ли кто-нибудь, кто сталкивался с тем же в ионном.

Answer 1

Немного неудобно вводить html в ионный элемент, но вы можете обойти его

css.

page-home {
    .select-text{
        white-space: normal;
        width: min-content;
        word-spacing: 9999px;
    }
}

хорошее обсуждение этого вопроса Может ли CSS вызвать разрыв строки после каждого слова в элементе?

надеюсь, это поможет