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

::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

After incorporating lazy loading modules in Angular 8, the main component is rendered twice within the Router outlet

I am in need of a efficient loader for a slow-loading page on my website. Any recommendations on where to find one that works

How can I evenly distribute three list items on a PhoneGap webpage using CSS?

What steps should be taken to empty a table before adding new rows to it?

The number entered will be incorporated into the API URL key value by passing the variable from page.html to services.ts

choose multiple elements from an array simultaneously

Looking to align a radio button in the middle of an inline-block?

Unlocking the Potential: Unveiling the Art of Activating Navigation in Single-Page Websites

When the user clicks on an element, my JavaScript code dynamically updates the CSS property by changing the window

Is there a way to conceal the second td element?

What are the steps for importing the merge function from RxJS?

Ways to constrain checkbox choices to only one within an HTML file as the checklist with the checkboxes is being created by JavaScript

Dynamic labeling of breadcrumbs in Angular is the way to go!

What is the method for ensuring that the delete functionality is displayed within the same row?

Creating HTML input elements dynamically using Javascript

Steps to address the error "zone is not defined" in your project

The vertical scrolling feature seems to be malfunctioning within my angular 10 application

Tips for updating the left positioning of a Div element on the fly

Adjusting ToggleButton hues in react-bootstrap

One-of-a-kind Design: Linear Gradient Background Image