1

I am using Angular5 for front-end development. I am trying with css but not getting any solution. Here is picture bellow. I want a solution that will be used Ellipsis for overflow text in dropdown boxes. ![] https://i.stack.imgur.com/fylO6.png

         <div class="col-3 form-group d-flex">
            <label>Air</label>
            <select>
               <option>One - A long option that gets cut off</option>
               <option>Two - A long option that gets cut off</option>
            </select>
        </div>


    select {
           width: 100%; 
           overflow: hidden; 
           text-overflow: ellipsis;
         }
Kawsarul Islam
  • 9
  • 4

1 Answers1

0

As explain here : How to style the option of an html "select" element?

It is not directly/natively possible. You need to use JS libraries, that will "fake" the <select> with other HTML elements.

The <select> element's internal structure is complex, and hard to control. If you want to get full control, you should consider using a library with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA to provide semantics.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Styling_with_CSS

SeeoX
  • 565
  • 3
  • 18