how to truncate dropdown text with ellipsis in mobile

Hi I want to make the text that i selected on dropdown to be in ellipsis if text is long. 

I already added  css.  

select {

   width:100px;

   overflow:hidden;

   white-space:nowrap;

   text-overflow:ellipsis;

}

select option {

   width:100px;

   text-overflow:ellipsis;

   overflow:hidden;

}


Still Output: 


Hi Joseph,

Please remove all the added custom CSS for Dropdown widget and try with the below mentioned CSS definition

[data-dropdown] > select.dropdown-display {
    text-overflow: ellipsis;
}


Hope this helps you!


Regards,

Benjith Sam

Hi Benjith, 

Thanks for the response, but still having the same output, without the ellipsis when the text is long.


Solution

Joseph Puangco wrote:

Hi Benjith, 

Thanks for the response, but still having the same output, without the ellipsis when the text is long.


Hi Joseph,

Introduce the below CSS definition in the Screen StyleSheet Section

[data-dropdown] > select.dropdown-display {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

See this sample app 


Hope this helps you!


Regards,

Benjith Sam

Solution