Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

flex display for label tag taking space at the bottom for bigger text

i have an html label field
<label className='flexRow'>Premium Economy</label>
the flexRow class is

.flexRow{
display:flex;
}

but because of the text length being too big i am not able to get it adjust horizontally what can be done to fit the text in the line without taking space at the bottom in html

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

To make sure that text within the fits in a single line without consuming space at bottom, you need to apply ‘overflow’ and ‘text-overflow’ properties in CSS.

Furthermore you can try ‘white-space’ property to control how the text wraps within the element.

—-CSS—–

.flexRow {
display: flex;
flex-direction: row;
align-items: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

}

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading