Ways to decrease the space between lines of text within a single mat-option element

Question

Ways to decrease the space between lines of text within a single mat-option element

https://i.sstatic.net/Sr1cb.png

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

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

Currently, I have implemented this code to ensure that text in options wraps to the next line when it's too long for a single line display. However, there is an issue with excessive white space between text lines within the mat options (as shown in the image). My goal is to minimize the line spacing within the same mat option. Any suggestions on how to achieve this adjustment would be greatly appreciated. Thank you.

html css angular

Answer 1

Answer №1

Remember to utilize the line-height property in your CSS.

Take a look at these examples (Execute the code snippet):

* {
  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>

Answer 2

Remember to utilize the line-height property in your CSS.

Take a look at these examples (Execute the code snippet):

* {
  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>

Ways to decrease the space between lines of text within a single mat-option element

Answer №1

Similar questions

The PHP SDK function works flawlessly in the local host environment and in console, however, it fails to perform on the browser when deployed

displaying the identical image from various perspectives

SASS causing conflicts with CSS breakpoints selector overrides

React modal image showing a misaligned image upon clicking

Struggling to grasp the concept of Vue3 style binding

Creating diagonal background cutouts using CSS

Bootstrap failing to enclose columns that do not have a specified size

Keywords: <footer>, <aside> not encompassing all aspects of the HTML on the content page

Challenges arise when using CSS Grid to design a basic layout with rows and several centered divs

Leveraging the :has pseudo-class in Tailwind along with adjacent sibling selectors

Executing PHP code on button click in HTMLThe process of running a PHP script when

When hovering, apply style 1 to all elements with the same id, and style 2 to the hovered element

Tips for binding to a single input box within an ngFor loop

I am interested in updating the content on the page seamlessly using Angular 6 without the need to reload

What is the process for including the 'Access-Control-Allow-Origin' header in all responses?

formatting the date incorrectly leads to incorrect results

Retrieve the data entered in the submit button field

Angular 2 - synchronizing timer for all users

The PHP code embedded within the HTML document and triggered by an AJAX request failed to

Angular Material's dialog modal swiftly closes without delay