Dropdown Text Overflow | Angular | Angular Material

Dropdown Text Overflow or Select Text Overflow.

In my Angular project which was using Angular material design, I faced an issue where the text in the dropdown was too large. It’s fine when I opened the dropdown but when I selected the large text option, it wasn’t fully visible.

The solution was to shown the text truncated with … at the end and show a tooltip with full text.

<select class="slt-data">
    <option>Data One</option>
    <option>Data Two</option>
</select>

I did it with the help of CSS.

.slt-data{
    text-overflow: ellipsis;
    width: calc((100%) - 10px)!important;
}

For tooltip I was using matTooltip on the select element.