JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

<ul id="dropdown-container">
<li>Long app name with ellipsis Donec ullamcorper nulla venenatis vestibulum</li>    
<li>Short app name</li>    
<li>Long app name with ellipsis Donec ullamcorper nulla venenatis vestibulum</li>    
<li>Long app name with ellipsis Donec ullamcorper nulla venenatis vestibulum</li>    
</ul>

See <a href="http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/">http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/</a>

CSS

#dropdown-container {
    width: 200px;
    background: lightgrey;
    padding: 0 5px;
    overflow: visible;
    list-style: none;
}
#dropdown-container li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
}

#dropdown-container li:hover {
    overflow: visible;
}