Блог

Главная - Вопросы по программированию - Как уменьшить интервал между текстовыми строками в одной и той же опции mat?

Как уменьшить интервал между текстовыми строками в одной и той же опции mat?

#html #css #angular

#HTML #css #угловой

Вопрос:

выпадающее описание

 ::ng-deep .mat-select-panel mat-option.mat-option {
  height: unset;
}

::ng-deep .mat-option-text.mat-option-text {
  white-space: normal;
}

Прямо сейчас я использую этот набор кода, чтобы текст в options переносился на следующую строку, если он слишком длинный для отображения в одной строке.
Проблема в том, что между текстовыми строками в параметрах mat есть пробел, который сворачивается.(Как показано на рисунке). Я хочу уменьшить межстрочный интервал в той же опции mat. Пожалуйста, предложите свои решения, спасибо.

Комментарии:

1. Посмотрите в инспекторе, чтобы узнать, что занимает пространство. Это может быть заполнение, поля, высота строки, граница или даже гибкое поле, разделяющее элементы.

Ответ №1:

Используйте line-height

Вот несколько примеров (запустите фрагмент кода, чтобы увидеть):

 * {
  margin: 0;
  padding: 0;
}

.box {
  margin: 1em;
  padding: 1em;
}

.one {
  border: 1px solid;
}

.two {
  border: 1px solid;
  line-height: 30px;
}

.three {
  border: 1px solid;
  line-height: 5px;
}

.four {
  border: 1px solid;
  line-height: 0px;
}

.five {
  border: 1px solid;
  line-height: 50px;
} 
 <div class="one box">
  <p>Hello</p>
  <p>World</p>
  <p>Normal line height</p>
</div>

<div class="two box">
  <p>Hello</p>
  <p>World</p>
  <p>30px line height</p>
</div>

<div class="three box">
  <p>Hello</p>
  <p>World</p>
  <p>5px line height</p>
</div>

<div class="four box">
  <p>Hello</p>
  <p>World</p>
  <p>0px line height</p>
</div>

<div class="five box">
  <p>Hello</p>
  <p>World</p>
  <p>50px line height</p>
</div>