Тег * ioni c 3 html5 p не расширяется для размера текстового содержимого css также не работает

Question

Я пытаюсь, чтобы тег html5 p отображал минимум 3 строки описания внутри тега ioni c 3 ion-item, как показано ниже:

             <ion-item>
                <ion-avatar item-start>
                  <img src="{{company.logo_url}}" alt="company_logo" *ngIf="company.logo_url">
                </ion-avatar>
                <h2>{{ company.company_name }}</h2>
                <p class="desc-line">{{ company.description_short }}</p>
              </ion-item>

s css Я пытался использовать:

.desc-line {
    display:inline-block;
  }

Что не сработало, поэтому я также попытался:

.desc-line {
display: -webkit-box;
overflow : hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; 
}

Теперь я понятия не имею, что делать дальше, что будет иметь смысл и убежище других подобных решений не найдено.

Answer 1

Вы не делаете ничего плохого.

Я также создал демо здесь, на Stackblitz.

Вам просто нужно добавить white-space: normal; к вашему .label CSS. Кроме того, Stackblitz не позволил мне изменить .label в файле S CSS, поэтому я добавил встроенный стиль к элементу ion-label.

.item {
  .label {
    white-space: normal;
  }
}

Пожалуйста, дайте мне знать, если это поможет.

Answer 2

Я не пробовал это решение, но думаю, что оно будет работать,

Вы можете установить минимальную высоту, например:

.desc-line {
  min-height: 30px !important;
}