how to truncate dropdown text with ellipsis in mobile
Question

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: 


mvp_badge
MVP
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

mvp_badge
MVP

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.


mvp_badge
MVP
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

 Hi Benjith

I got still having the same output although I added above CSS and what should I do?

I 'm writing for web app.

Q3.PNG

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.