Skip to Content (Press Enter)
UserImage.jpg
Joseph Lorenzo Puangco
371Views
4Comments
Solved
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: 


0
0
17 Jul 2020
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
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

See solution in context
1
0
17 Jul 2020
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
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

0
0
17 Jul 2020
Copy Link
UserImage.jpg
Joseph Lorenzo Puangco

Hi Benjith, 

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


0
0
17 Jul 2020
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
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

1
0
17 Jul 2020
Copy Link
UserImage.jpg
Ei Yadanar Moe Min

Replying to Benjith Sam's comment on 17 Jul 2020 07:04:30

 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
0
0
26 Jul 2021
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.