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

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

}

Leave a Reply